Image Batch Chroma Key Processor

/**
 * Applies a chroma key effect to an image, removing a specified color and making it transparent.
 *
 * @param {Image} originalImg The original Image object to process.
 * @param {string} keyColor The hex color string (e.g., "#00FF00") to be removed.
 * @param {number} tolerance A value from 0-255 representing the tolerance for color matching. Higher values will remove a wider range of similar colors.
 * @returns {HTMLCanvasElement} A new canvas element with the chroma key effect applied.
 */
function processImage(originalImg, keyColor = "#00FF00", tolerance = 50) {
    /**
     * Helper function to parse a hex color string into an RGB object.
     * Supports formats like #RRGGBB, RRGGBB, #RGB, and RGB.
     * @param {string} hex - The hex color string.
     * @returns {{r: number, g: number, b: number}|null} An object with r, g, b properties, or null if invalid.
     */
    const hexToRgb = (hex) => {
        // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
        const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);

        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    };

    // Create a canvas element to work with
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    const keyRgb = hexToRgb(keyColor);
    if (!keyRgb) {
        console.error("Invalid keyColor format. Please use a valid hex color string (e.g., '#00FF00'). Returning original image.");
        return canvas;
    }

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Use squared tolerance for performance to avoid Math.sqrt in the loop
    const toleranceSq = tolerance * tolerance;

    // Iterate over each pixel (represented by 4 values: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // Calculate the squared Euclidean distance between the current pixel's color and the key color
        const distanceSq = (r - keyRgb.r) ** 2 + (g - keyRgb.g) ** 2 + (b - keyRgb.b) ** 2;

        // If the distance is within the tolerance, make the pixel transparent
        if (distanceSq < toleranceSq) {
            data[i + 3] = 0; // Set the Alpha channel to 0 (fully transparent)
        }
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // Return the processed canvas
    return canvas;
}