Image Screen Burn-in Filter Effect Tool

function processImage(originalImg, intensity = 0.5, tintColorStr = "rgba(80, 80, 150, 0.3)") {
    const canvas = document.createElement('canvas');
    // Use willReadFrequently for performance hint if supported, especially for frequent calls
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Ensure canvas has valid dimensions
    canvas.width = imgWidth > 0 ? imgWidth : 1;
    canvas.height = imgHeight > 0 ? imgHeight : 1;

    // Helper function to parse color string (hex, rgb, rgba names) into an {r, g, b, a} object.
    // The alpha component of this parsed color (tintMixAlpha) controls how much the
    // original color is preserved versus how much it shifts towards the tintColor.
    function parseColor(colorStr) {
        // Create a temporary element to apply the color string and get computed style
        const tempDiv = document.createElement("div");
        tempDiv.style.color = colorStr;
        // Element must be in DOM for getComputedStyle to work reliably in some browsers/cases
        document.body.appendChild(tempDiv); 
        const computedColor = window.getComputedStyle(tempDiv).color;
        document.body.removeChild(tempDiv);

        // Regex to parse "rgb(r, g, b)" or "rgba(r, g, b, a)"
        const match = computedColor.match(/rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*([\d.]+))?\)/);
        if (match) {
            return {
                r: parseInt(match[1], 10),
                g: parseInt(match[2], 10),
                b: parseInt(match[3], 10),
                // If alpha is not present (rgb), default to 1.0
                a: match[4] !== undefined ? parseFloat(match[4]) : 1.0 
            };
        }
        
        // Fallback for safety if parsing fails (e.g., invalid color string not caught by browser)
        // Defaults to a slightly transparent blue, matching the default tintColorStr's characteristics
        console.warn(`Failed to parse color: "${colorStr}". Using default burn-in tint.`);
        return { r: 80, g: 80, b: 150, a: 0.3 }; 
    }

    const tint = parseColor(tintColorStr);
    const tintR = tint.r;
    const tintG = tint.g;
    const tintB = tint.b;
    // This is the alpha component from the tintColorStr (e.g., 0.3 from "rgba(..., 0.3)").
    // It determines the mixing ratio between original pixel color and tint color.
    const tintMixAlpha = Math.max(0, Math.min(1, tint.a)); 

    // Clamp intensity parameter to the valid range [0, 1]
    // This controls the overall opacity of the final "burn-in" effect.
    const finalIntensity = Math.max(0, Math.min(1, intensity));

    // If image has no actual content (0 width/height), drawImage would do nothing
    // or error. We proceed, imageData will be small, loop might not run.
    if (imgWidth <=0 || imgHeight <= 0) {
        // Output a blank canvas (or tiny tinted one if that's preferred)
        // This state implies an unloaded or invalid image.
        // The canvas is already 1x1 by the dimension checks above.
        // For 0-pixel image, an empty canvas of minimal size is a reasonable output.
        return canvas;
    }

    // Draw the original image onto the canvas to access its pixel data
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This can happen due to tainted canvas (e.g. cross-origin image without CORS)
        console.error("Could not get ImageData, possibly due to tainted canvas:", e);
        // Draw a placeholder indicating error or return the original (unfilterable) image representation
        // For now, return the canvas as is (it has the original image drawn)
        // or a new canvas with an error message for robustness in a real tool.
        // For this exercise, we assume valid, non-tainted image source.
        // Fallback: return a simple canvas with a red tint to signify error.
        ctx.fillStyle = "rgba(255,0,0,0.5)";
        ctx.fillRect(0,0,canvas.width, canvas.height);
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray

    for (let i = 0; i < data.length; i += 4) {
        const rOrig = data[i];
        const gOrig = data[i + 1];
        const bOrig = data[i + 2];
        const aOrig = data[i + 3];

        // Skip fully transparent pixels to preserve them as transparent
        if (aOrig === 0) {
            continue;
        }

        // Step 1: Mix original color with tint color.
        // The tintMixAlpha (from tintColorStr's alpha) controls this blend.
        // If tintMixAlpha is 1, color becomes pure tintColor.
        // If tintMixAlpha is 0, color remains original.
        const rEffect = rOrig * (1 - tintMixAlpha) + tintR * tintMixAlpha;
        const gEffect = gOrig * (1 - tintMixAlpha) + tintG * tintMixAlpha;
        const bEffect = bOrig * (1 - tintMixAlpha) + tintB * tintMixAlpha;
        
        // Assign mixed colors. Uint8ClampedArray handles clamping to 0-255.
        data[i] = rEffect;
        data[i + 1] = gEffect;
        data[i + 2] = bEffect;

        // Step 2: Set the alpha of this "burn-in" affected pixel.
        // The overall visibility/strength of the burn-in effect is controlled by `finalIntensity`.
        // `finalIntensity` scales the original alpha.
        // If `finalIntensity` is 0, pixel becomes transparent.
        // If `finalIntensity` is 1, pixel (now tinted) retains original_alpha scaled opacity.
        data[i + 3] = aOrig * finalIntensity;
    }

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

    return canvas;
}