Image Bleach Bypass Effect Filter

function processImage(originalImg, strength = 1.0) {
    // Parse and clamp the strength parameter
    // strength parameter controls the intensity of the bleach bypass effect.
    // 0.0 means no effect (original image), 1.0 means full effect.
    let effectStrength = parseFloat(strength);
    if (isNaN(effectStrength)) {
        effectStrength = 1.0; // Default to full strength if input is not a valid number
    }
    effectStrength = Math.max(0.0, Math.min(1.0, effectStrength)); // Clamp to [0, 1] range

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth and naturalHeight to get the original image dimensions
    // This is important if the img element's width/height attributes are scaled
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // If effectStrength is 0, no processing is needed.
    // The canvas already contains the original image.
    if (effectStrength === 0) {
        return canvas;
    }

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray
    const len = data.length;

    // Helper function for the Overlay blend mode component.
    // Overlay blend mode is commonly used to simulate bleach bypass.
    // It blends the original image (backdrop) with its desaturated version (source).
    // backdropChannelNorm: Normalized value of a color channel from the original image.
    // sourceChannelNorm: Normalized grayscale value of the pixel (serves as the source).
    const applyOverlayComponent = (backdropChannelNorm, sourceChannelNorm) => {
        if (backdropChannelNorm < 0.5) {
            return 2 * backdropChannelNorm * sourceChannelNorm;
        } else {
            return 1 - 2 * (1 - backdropChannelNorm) * (1 - sourceChannelNorm);
        }
    };

    // Iterate over each pixel (RGBA components)
    for (let i = 0; i < len; i += 4) {
        const rOrig = data[i];     // Original Red
        const gOrig = data[i+1];   // Original Green
        const bOrig = data[i+2];   // Original Blue
        // Alpha (data[i+3]) is preserved

        // 1. Calculate luminance (grayscale value) of the current pixel.
        // Using Rec.709 luma coefficients (standard for HDTV, widely used).
        // L = 0.2126*R + 0.7152*G + 0.0722*B
        const luminance = (0.2126 * rOrig + 0.7152 * gOrig + 0.0722 * bOrig); // Range 0-255
        const grayNorm = luminance / 255.0; // Normalized luminance for blending [0,1]

        // 2. Normalize original color channels to [0,1] for blending
        const rOrigNorm = rOrig / 255.0;
        const gOrigNorm = gOrig / 255.0;
        const bOrigNorm = bOrig / 255.0;

        // 3. Apply Overlay blend for each color channel.
        // The backdrop is the original color channel, the source is the normalized grayscale value.
        let rProcessedNorm = applyOverlayComponent(rOrigNorm, grayNorm);
        let gProcessedNorm = applyOverlayComponent(gOrigNorm, grayNorm);
        let bProcessedNorm = applyOverlayComponent(bOrigNorm, grayNorm);
        
        // 4. Clamp processed normalized values to [0,1].
        // This is a safeguard for potential floating point inaccuracies,
        // though Overlay blend itself mathematically stays within [0,1] if inputs are in [0,1].
        rProcessedNorm = Math.max(0.0, Math.min(1.0, rProcessedNorm));
        gProcessedNorm = Math.max(0.0, Math.min(1.0, gProcessedNorm));
        bProcessedNorm = Math.max(0.0, Math.min(1.0, bProcessedNorm));

        // 5. Convert processed normalized color channels back to 0-255 range
        const rProcessed = rProcessedNorm * 255;
        const gProcessed = gProcessedNorm * 255;
        const bProcessed = bProcessedNorm * 255;

        // 6. Linearly interpolate between original pixel and processed pixel based on effectStrength.
        // finalValue = (1 - strength) * originalValue + strength * processedValue
        data[i]   = (1 - effectStrength) * rOrig + effectStrength * rProcessed;
        data[i+1] = (1 - effectStrength) * gOrig + effectStrength * gProcessed;
        data[i+2] = (1 - effectStrength) * bOrig + effectStrength * bProcessed;
        // Alpha channel (data[i+3]) remains unchanged.
    }

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

    return canvas;
}