Image Transparency Adjuster For Clothing

/**
 * Adjusts the transparency of specific colors in an image, useful for making clothing transparent.
 * It works by identifying pixels similar to a specified target color and setting their opacity.
 *
 * @param {Image} originalImg The original, fully loaded HTML Image object.
 * @param {string} [targetColor='#0000ff'] The CSS color string (e.g., 'red', '#ff0000', 'rgb(255,0,0)') to be made transparent.
 * @param {number} [tolerance=30] A percentage (0-100) indicating how close a color must be to the target color to be affected. Higher values affect a wider range of colors.
 * @param {number} [opacityLevel=0] The desired opacity level (0.0 to 1.0) for the affected pixels. 0 is fully transparent, 1 is fully opaque.
 * @returns {HTMLCanvasElement} A new canvas element with the transparency effect applied.
 */
function processImage(originalImg, targetColor = '#0000ff', tolerance = 30, opacityLevel = 0) {
    // Create a canvas element to draw on.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    // Ensure the image has loaded and has valid dimensions.
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    if (width === 0 || height === 0) {
        console.error("The provided Image object has not loaded or has zero dimensions.");
        canvas.width = 1;
        canvas.height = 1;
        return canvas; // Return a minimal canvas to avoid errors.
    }

    // Set canvas dimensions to match the image.
    canvas.width = width;
    canvas.height = height;

    // Helper function to parse any valid CSS color string into an RGB object.
    const parseColorToRgb = (colorStr) => {
        // This is a robust trick: create a 1x1 canvas, fill it with the desired
        // color, and then read the pixel's RGB data.
        const tempCtx = document.createElement('canvas').getContext('2d');
        if (!tempCtx) { // Fallback for environments where canvas is not supported
            return { r: 0, g: 0, b: 0 };
        }
        tempCtx.fillStyle = colorStr;
        tempCtx.fillRect(0, 0, 1, 1);
        const pixelData = tempCtx.getImageData(0, 0, 1, 1).data;
        return { r: pixelData[0], g: pixelData[1], b: pixelData[2] };
    };

    // Sanitize input parameters to ensure they are within valid ranges.
    const safeTolerance = Math.max(0, Math.min(100, Number(tolerance)));
    const safeOpacity = Math.max(0, Math.min(1, Number(opacityLevel)));

    let targetRgb;
    try {
        targetRgb = parseColorToRgb(targetColor);
    } catch (e) {
        console.error(`Invalid targetColor format: "${targetColor}". Falling back to default blue.`, e);
        // Default to blue's RGB values if parsing fails.
        targetRgb = { r: 0, g: 0, b: 255 };
    }

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

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

    // Calculate the color distance threshold from the tolerance percentage.
    // We use Manhattan distance for performance. The max distance is 255*3=765.
    const threshold = (safeTolerance / 100) * 765;
    const finalAlpha = Math.round(safeOpacity * 255);

    // Iterate through every 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 "Manhattan distance" between the current pixel's color and the target color.
        const distance = Math.abs(r - targetRgb.r) + Math.abs(g - targetRgb.g) + Math.abs(b - targetRgb.b);

        // If the color difference is within our threshold, adjust the pixel's alpha channel.
        if (distance <= threshold) {
            data[i + 3] = finalAlpha;
        }
    }

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

    // Return the canvas element with the result.
    return canvas;
}