Image Sun Bleached Filter Effect Tool

function processImage(originalImg, bleachIntensity = 0.6) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for actual image dimensions, fallback to width/height
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // If image dimensions are zero (e.g., image not loaded or invalid), return an empty canvas.
    if (imgWidth === 0 || imgHeight === 0) {
        canvas.width = 0;
        canvas.height = 0;
        // Optional: console.warn("Image Sun Bleached Filter: Input image has zero dimensions. Returning an empty canvas.");
        return canvas;
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    let imageData;
    try {
        // Get pixel data from the canvas
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        // This can occur if the canvas is tainted (e.g., by cross-origin image without CORS).
        // In such a case, pixel manipulation is not possible. Return the canvas with the original image drawn.
        // Optional: console.error("Image Sun Bleached Filter: Could not getImageData. Canvas may be tainted.", e);
        return canvas;
    }
    
    const data = imageData.data; // data is a Uint8ClampedArray: [r,g,b,a, r,g,b,a, ...]

    // Validate and sanitize the bleachIntensity parameter
    let numericIntensity;
    if (typeof bleachIntensity === 'string') {
        numericIntensity = parseFloat(bleachIntensity);
    } else if (typeof bleachIntensity === 'number') {
        numericIntensity = bleachIntensity;
    } else {
        // Fallback to default if bleachIntensity is of an unexpected type
        numericIntensity = 0.6; 
    }

    if (isNaN(numericIntensity)) {
        // Fallback to default if parsing resulted in NaN (e.g. parseFloat("text"))
        numericIntensity = 0.6; 
    }
    
    // Clamp intensity to the operational range [0, 1]
    numericIntensity = Math.max(0, Math.min(1, numericIntensity));

    // Define effect parameters based on the numericIntensity
    // A higher intensity means a stronger "sun bleached" effect.

    // Brightness adjustment: Increases overall image lightness.
    // Max increase of 70 (on a 0-255 scale for each color channel).
    const brightnessAdjustment = numericIntensity * 70; 
    
    // Contrast factor: Reduces the difference between light and dark areas.
    // A factor of 1 means original contrast. Lower values reduce contrast.
    // Max reduction: contrastFactor becomes 0.3 (1 - 0.7) when numericIntensity is 1.
    const contrastFactor = 1 - (numericIntensity * 0.7);   
    
    // Desaturation level: Reduces color vividness, making colors appear more muted or grayish.
    // Max desaturation: 60% (0.6) when numericIntensity is 1.
    const desaturationLevel = numericIntensity * 0.6;  

    // Iterate over each pixel (each pixel has 4 components: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];   // Red channel
        let g = data[i+1]; // Green channel
        let b = data[i+2]; // Blue channel
        // Alpha channel (data[i+3]) is preserved.

        // Step 1: Adjust contrast
        // This operation shifts color values relative to the midpoint (128).
        // Values further from 128 are moved closer if contrastFactor < 1.
        r = (r - 128) * contrastFactor + 128;
        g = (g - 128) * contrastFactor + 128;
        b = (b - 128) * contrastFactor + 128;

        // Step 2: Adjust brightness
        // This uniformly increases the lightness of each color channel.
        r += brightnessAdjustment;
        g += brightnessAdjustment;
        b += brightnessAdjustment;

        // Clamp intermediate R, G, B values to [0, 255] range.
        // This is important before desaturation, as desaturation math assumes valid color inputs.
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // Step 3: Apply desaturation
        if (desaturationLevel > 0) {
            // Calculate the grayscale (luminance) equivalent of the pixel.
            // Uses standard NTSC luminance weights.
            const gray = 0.299 * r + 0.587 * g + 0.114 * b;
            
            // Blend the current color with its grayscale equivalent.
            // A desaturationLevel of 0 means full original color.
            // A desaturationLevel of 1 means full grayscale.
            r = r * (1 - desaturationLevel) + gray * desaturationLevel;
            g = g * (1 - desaturationLevel) + gray * desaturationLevel;
            b = b * (1 - desaturationLevel) + gray * desaturationLevel;
        }

        // Final clamp: Ensure all color channel values are within the byte range [0, 255].
        data[i]   = Math.max(0, Math.min(255, r));
        data[i+1] = Math.max(0, Math.min(255, g));
        data[i+2] = Math.max(0, Math.min(255, b));
    }

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

    // Return the canvas element with the sun-bleached image
    return canvas;
}