Image Transformer

/**
 * Transforms an image by applying rotation, scaling, flipping, skewing, and translation.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} rotationAngle The angle to rotate the image in degrees. Default is 0.
 * @param {number} scaleX The horizontal scaling factor. 1 means 100%. Default is 1.
 * @param {number} scaleY The vertical scaling factor. 1 means 100%. Default is 1.
 * @param {number} flipHorizontal A flag to flip the image horizontally (1 for yes, 0 for no). Default is 0.
 * @param {number} flipVertical A flag to flip the image vertically (1 for yes, 0 for no). Default is 0.
 * @param {number} translateX The number of pixels to move the image horizontally. Default is 0.
 * @param {number} translateY The number of pixels to move the image vertically. Default is 0.
 * @param {number} skewX The skew angle for the x-axis in degrees. Default is 0.
 * @param {number} skewY The skew angle for the y-axis in degrees. Default is 0.
 * @returns {HTMLCanvasElement} A new canvas element containing the transformed image.
 */
function processImage(originalImg, rotationAngle = 0, scaleX = 1, scaleY = 1, flipHorizontal = 0, flipVertical = 0, translateX = 0, translateY = 0, skewX = 0, skewY = 0) {
    // Coerce all parameters to numbers for safety.
    rotationAngle = Number(rotationAngle);
    scaleX = Number(scaleX);
    scaleY = Number(scaleY);
    flipHorizontal = Number(flipHorizontal);
    flipVertical = Number(flipVertical);
    translateX = Number(translateX);
    translateY = Number(translateY);
    skewX = Number(skewX);
    skewY = Number(skewY);

    const w = originalImg.width;
    const h = originalImg.height;

    // Convert angles from degrees to radians for the transformation functions.
    const rotationRad = rotationAngle * Math.PI / 180;
    const skewXRad = skewX * Math.PI / 180;
    const skewYRad = skewY * Math.PI / 180;

    // Incorporate flipping into the scale factors.
    const finalScaleX = flipHorizontal ? -scaleX : scaleX;
    const finalScaleY = flipVertical ? -scaleY : scaleY;

    // Define the four corners of the original image.
    const corners = [
        { x: 0, y: 0 },
        { x: w, y: 0 },
        { x: w, y: h },
        { x: 0, y: h }
    ];

    // Calculate the position of each corner after all transformations.
    // This allows us to determine the bounding box of the transformed image.
    const transformedCorners = corners.map(corner => {
        // 1. Translate corner to be relative to the image center.
        let x = corner.x - w / 2;
        let y = corner.y - h / 2;

        // 2. Apply rotation.
        let x_rot = x * Math.cos(rotationRad) - y * Math.sin(rotationRad);
        let y_rot = x * Math.sin(rotationRad) + y * Math.cos(rotationRad);
        
        // 3. Apply skew. Note: skew is applied to the rotated coordinates.
        // It's equivalent to ctx.transform(1, tan(skewY), tan(skewX), 1, 0, 0)
        let x_skew = x_rot + y_rot * Math.tan(skewXRad);
        let y_skew = y_rot + x_rot * Math.tan(skewYRad);

        // 4. Apply scaling and flipping.
        let x_scale = x_skew * finalScaleX;
        let y_scale = y_skew * finalScaleY;

        // 5. Apply the final translation.
        let x_trans = x_scale + translateX;
        let y_trans = y_scale + translateY;

        return { x: x_trans, y: y_trans };
    });

    // Determine the bounding box of the transformed image.
    const minX = Math.min(...transformedCorners.map(c => c.x));
    const maxX = Math.max(...transformedCorners.map(c => c.x));
    const minY = Math.min(...transformedCorners.map(c => c.y));
    const maxY = Math.max(...transformedCorners.map(c => c.y));

    // Create a new canvas with dimensions that fit the transformed image.
    const canvas = document.createElement('canvas');
    canvas.width = Math.ceil(maxX - minX);
    canvas.height = Math.ceil(maxY - minY);
    const ctx = canvas.getContext('2d');

    // The drawing process applies transformations in reverse order to the calculation above.
    // We set up the context so we can draw the original image and have it appear transformed.

    // 1. Translate the canvas context so that the top-left of the bounding box is at (0,0).
    ctx.translate(-minX, -minY);

    // 2. Translate to the point where the image's center will be after transformation.
    ctx.translate(translateX, translateY);

    // 3. Apply rotation around the new origin.
    ctx.rotate(rotationRad);
    
    // 4. Apply skew. This is done using ctx.transform for accuracy.
    ctx.transform(1, Math.tan(skewYRad), Math.tan(skewXRad), 1, 0, 0);

    // 5. Apply scaling and flipping.
    ctx.scale(finalScaleX, finalScaleY);

    // 6. Draw the image. Since all transformations are centered, we draw the image
    //    relative to its center by offsetting it by (-width/2, -height/2).
    ctx.drawImage(originalImg, -w / 2, -h / 2, w, h);

    return canvas;
}