Image Transparency Maker For Clothing

/**
 * Makes parts of an image transparent based on a target color and tolerance.
 * This is useful for removing backgrounds from product images, such as clothing photos.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {string} colorToMakeTransparent A CSS color string (e.g., '#FFFFFF', 'rgb(255,255,255)', 'white') of the color to target for transparency. Defaults to white.
 * @param {number} tolerance A number from 0 to 255 representing the tolerance for color matching. A higher value will make more shades of the target color transparent. Defaults to 20.
 * @returns {HTMLCanvasElement} A canvas element with the processed image.
 */
function processImage(originalImg, colorToMakeTransparent = '#ffffff', tolerance = 20) {
    // 1. Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

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

    // Helper function to parse any valid CSS color string into an {r, g, b} object
    const parseColor = (colorStr) => {
        const tempCtx = document.createElement('canvas').getContext('2d');
        tempCtx.canvas.width = 1;
        tempCtx.canvas.height = 1;
        tempCtx.fillStyle = colorStr;
        tempCtx.fillRect(0, 0, 1, 1);
        const [r, g, b] = tempCtx.getImageData(0, 0, 1, 1).data;
        return {
            r,
            g,
            b
        };
    };

    const targetColor = parseColor(colorToMakeTransparent);
    const toleranceNumber = Number(tolerance);

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

    // 4. Get the image data from the canvas
    // Use a try-catch block to handle potential security errors if the image is cross-origin
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Could not process the image due to cross-origin restrictions.", e);
        // Draw an error message on the canvas as feedback
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = "16px Arial";
        ctx.fillStyle = "red";
        ctx.textAlign = "center";
        ctx.fillText("Error: Cannot process cross-origin image.", canvas.width / 2, canvas.height / 2);
        return canvas;
    }

    const data = imageData.data;

    // 5. Iterate over each pixel of the image data
    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 color distance between the current pixel and the target color
        // using the Euclidean distance formula in the RGB color space.
        const distance = Math.sqrt(
            Math.pow(r - targetColor.r, 2) +
            Math.pow(g - targetColor.g, 2) +
            Math.pow(b - targetColor.b, 2)
        );

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

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

    // 7. Return the canvas with the transparent background
    return canvas;
}