Image Bleach Bypass Filter

function processImage(originalImg, contrast = 1.5, saturation = 0.3) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height if available, otherwise fallback to width/height
    // This handles cases where the image object might not be fully loaded into the DOM
    // but has dimensions available.
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Set canvas dimensions
    canvas.width = width;
    canvas.height = height;

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

    // Get the ImageData object from the canvas.
    // This can throw an error if the canvas is tainted (e.g., cross-origin image without CORS).
    // For this problem, we assume the image is usable and not tainted.
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data; // This is a Uint8ClampedArray

    // Iterate over each pixel in the image data
    // Each pixel is 4 bytes: R, G, B, A
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        // Alpha (data[i+3]) is preserved

        // 1. Apply contrast adjustment to each color channel
        // The formula ((value/255 - 0.5) * contrastFactor + 0.5) * 255 adjusts contrast:
        // - value/255: normalize pixel value to [0, 1]
        // - - 0.5: shift range to [-0.5, 0.5] so 0 is mid-gray
        // - * contrast: scale the deviation from mid-gray
        // - + 0.5: shift range back to [0, 1] (approximately, may exceed)
        // - * 255: scale back to [0, 255]
        let r_c = ((r / 255 - 0.5) * contrast + 0.5) * 255;
        let g_c = ((g / 255 - 0.5) * contrast + 0.5) * 255;
        let b_c = ((b / 255 - 0.5) * contrast + 0.5) * 255;

        // Clamp the contrasted color components to the valid [0, 255] range.
        // This is crucial because these values are used in the luminance calculation below.
        r_c = Math.max(0, Math.min(255, r_c));
        g_c = Math.max(0, Math.min(255, g_c));
        b_c = Math.max(0, Math.min(255, b_c));

        // 2. Desaturate the contrasted color
        // Calculate the luminance (brightness) of the contrasted color.
        // These are standard coefficients for converting RGB to perceived luminance.
        const lum_c = 0.299 * r_c + 0.587 * g_c + 0.114 * b_c;

        // Interpolate between the contrasted color and its luminance (grayscale version)
        // saturation = 0: result is lum_c (grayscale)
        // saturation = 1: result is r_c, g_c, b_c (full contrasted color)
        // Values between 0 and 1 mix the grayscale and color versions.
        const r_final = lum_c + (r_c - lum_c) * saturation;
        const g_final = lum_c + (g_c - lum_c) * saturation;
        const b_final = lum_c + (b_c - lum_c) * saturation;

        // Assign the new RGB values back to the ImageData object.
        // The Uint8ClampedArray automatically clamps values to [0, 255] and rounds to the nearest integer.
        data[i] = r_final;
        data[i + 1] = g_final;
        data[i + 2] = b_final;
    }

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

    // Return the canvas element
    return canvas;
}