Image URL Pitch And Upload Tool

/**
 * Interprets "pitch" as a geometric shear or skew transformation on the image.
 * This function skews the input image horizontally or vertically by a given factor.
 * The "URL" and "Upload" parts of the tool name are handled by returning a canvas,
 * which can then be converted to a data URL or blob for uploading or display.
 *
 * @param {Image} originalImg The original javascript Image object to be processed.
 * @param {number} pitchFactor A number representing the amount of skew. Positive values skew one way, negative values the other. Default is 0.5.
 * @param {string} direction The direction of the skew. Can be 'horizontal' or 'vertical'. Default is 'horizontal'.
 * @returns {HTMLCanvasElement} A new canvas element containing the pitched (skewed) image.
 */
function processImage(originalImg, pitchFactor = 0.5, direction = 'horizontal') {
    // Ensure pitchFactor is a number
    const factor = Number(pitchFactor);
    if (isNaN(factor)) {
        console.error("Invalid pitchFactor: a number is required.");
        // Return a canvas with the original image in case of error
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = originalImg.width;
        errorCanvas.height = originalImg.height;
        errorCanvas.getContext('2d').drawImage(originalImg, 0, 0);
        return errorCanvas;
    }

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

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    if (direction.toLowerCase() === 'horizontal') {
        // Horizontal shear transforms (x, y) to (x + factor*y, y)
        // Set the canvas dimensions to fit the skewed image entirely.
        canvas.width = w + Math.abs(factor * h);
        canvas.height = h;

        // If the factor is negative, the image skews to the left. The top of the image
        // would be drawn off-canvas to the left. We need to translate the coordinate
        // system to the right to make the entire image visible.
        if (factor < 0) {
            ctx.translate(-factor * h, 0);
        }

        // Apply the shear transformation matrix.
        // The matrix is [a, b, c, d, e, f] corresponding to:
        // [scaleX, skewY, skewX, scaleY, translateX, translateY]
        ctx.transform(1, 0, factor, 1, 0, 0);

    } else if (direction.toLowerCase() === 'vertical') {
        // Vertical shear transforms (x, y) to (x, y + factor*x)
        // Set the canvas dimensions to fit the skewed image entirely.
        canvas.width = w;
        canvas.height = h + Math.abs(factor * w);

        // If the factor is negative, the image skews upwards. The right side of the image
        // would be drawn off-canvas at the top. We need to translate the coordinate
        // system down to make the entire image visible.
        if (factor < 0) {
            ctx.translate(0, -factor * w);
        }

        // Apply the vertical shear transformation matrix.
        ctx.transform(1, factor, 0, 1, 0, 0);

    } else {
        console.error("Invalid direction: must be 'horizontal' or 'vertical'.");
        // Return a canvas with the original image in case of error
        canvas.width = w;
        canvas.height = h;
        ctx.drawImage(originalImg, 0, 0);
        return canvas;
    }

    // Draw the original image onto the transformed context.
    // The transformation will be applied as the image is drawn.
    ctx.drawImage(originalImg, 0, 0);

    return canvas;
}