Image Base Color Changer

function processImage(originalImg, targetColorStr = "red", strength = 0.5) {
    // Clamp strength to the range [0, 1]
    strength = Math.max(0, Math.min(1, strength));

    const canvas = document.createElement('canvas');
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');

    if (w === 0 || h === 0) {
        // Handle cases where the image might not be loaded or is an empty image
        return canvas;
    }

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

    // If strength is 0, the image remains unchanged, so we can return early.
    if (strength === 0) {
        return canvas;
    }

    // Parse targetColorStr to an opaque RGB format (e.g., "rgb(r,g,b)")
    // This ensures that the 'color' blend mode works predictably,
    // using the target color's hue/saturation but not its alpha.
    let opaqueRgbColor = 'rgb(0,0,0)'; // Default to black if parsing fails

    try {
        const tempDiv = document.createElement('div');
        // Style to make it non-intrusive and ensure computed styles are available
        tempDiv.style.position = 'fixed'; // Use fixed to ensure it's in the layout for getComputedStyle
        tempDiv.style.left = '-9999px';   // Position off-screen
        tempDiv.style.top = '-9999px';
        tempDiv.style.width = '1px';      // Give it minimal dimensions
        tempDiv.style.height = '1px';
        tempDiv.style.color = targetColorStr; // Apply the user-provided color string

        document.body.appendChild(tempDiv); // Must be in document to get computed style
        const computedColor = window.getComputedStyle(tempDiv).color;
        document.body.removeChild(tempDiv); // Clean up

        // computedColor is usually in "rgb(r, g, b)" or "rgba(r, g, b, a)" format
        const match = computedColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
        if (match) {
            opaqueRgbColor = `rgb(${match[1]}, ${match[2]}, ${match[3]})`;
        } else {
            // If parsing fails (e.g., invalid color string, or unexpected computedColor format),
            // opaqueRgbColor remains 'rgb(0,0,0)'. Canvas fillStyle itself will also default to black
            // for invalid color strings.
            console.warn(`Could not parse targetColor "${targetColorStr}" into RGB. Effect might use black as target color.`);
        }
    } catch (e) {
        // Catch any errors during DOM manipulation (e.g. if document.body is not yet available) or regex.
        console.error("Error during color parsing: ", e);
        // opaqueRgbColor is already defaulted to 'rgb(0,0,0)'
    }

    // Create a temporary canvas for applying the color transformation
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = w;
    tempCanvas.height = h;
    const tempCtx = tempCanvas.getContext('2d');

    // Draw the original image onto the temporary canvas
    tempCtx.drawImage(originalImg, 0, 0, w, h);

    // Set the composite operation to 'color'.
    // This mode preserves the luminosity of the base (original image on tempCtx)
    // and takes the hue and saturation from the source (the fillRect color).
    // The alpha of the base image (original image's alpha) is preserved through this operation when source is opaque.
    tempCtx.globalCompositeOperation = 'color';
    
    // Fill with the parsed opaque target color
    tempCtx.fillStyle = opaqueRgbColor;
    tempCtx.fillRect(0, 0, w, h);

    // The main canvas (ctx) currently holds the original image.
    // We will draw the colorized image (from tempCanvas) on top of it.
    // The 'strength' parameter controls the opacity of this colorized layer.
    ctx.globalAlpha = strength;
    ctx.drawImage(tempCanvas, 0, 0, w, h);
    
    // Reset globalAlpha on the main canvas to its default value (1.0)
    // This is important if the canvas context is reused elsewhere.
    ctx.globalAlpha = 1.0;

    return canvas;
}