Image Saturation Adjustment Tool

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

    // Use naturalWidth and naturalHeight for intrinsic image dimensions.
    // Fallback to width/height if naturalWidth/Height are 0 (e.g., for SVGs or not-yet-loaded images).
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // If image dimensions are effectively zero, return a minimal 1x1 canvas.
    // This prevents errors with zero-dimension canvases.
    if (imgWidth === 0 || imgHeight === 0) {
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

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

    // Draw the original image onto the canvas.
    // This is the first step; if subsequent processing fails (e.g., CORS),
    // the canvas will at least contain the original image.
    try {
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This might happen if originalImg is tainted or unusable for drawing.
        console.error("Error drawing image to canvas:", e);
        // Return the (likely blank) canvas.
        return canvas;
    }
    

    // Parse the saturation parameter. It can be a number or a string.
    let s = parseFloat(saturation);

    // If parsing fails (e.g., saturation="abc"), or if saturation is null/undefined,
    // default to 1.0 (no change).
    if (isNaN(s)) {
        s = 1.0;
    }

    // Ensure saturation factor is non-negative.
    // s = 0: grayscale
    // s = 1: original image
    // s > 1: increased saturation
    // s between 0 and 1: decreased saturation
    s = Math.max(0, s);

    // Optimization: If saturation is effectively 1.0 (no change),
    // return the canvas with the original image directly.
    // Use a small epsilon for floating-point comparison.
    if (Math.abs(s - 1.0) < 0.00001) {
        return canvas;
    }

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This commonly happens due to cross-origin restrictions on getImageData.
        console.error("Error getting image data for saturation adjustment (cross-origin issue?):", e);
        // In this case, the canvas already contains the original image (drawn above).
        // Return it as is, as processing cannot continue.
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray
    const len = data.length;

    // Standard luminance coefficients for converting RGB to grayscale.
    // These are often used for NTSC/PAL signals (Rec. 601).
    const lumR = 0.299;
    const lumG = 0.587;
    const lumB = 0.114;

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

        // Calculate the grayscale (luminance) value of the pixel.
        const gray = lumR * r + lumG * g + lumB * b;

        // Adjust saturation using the formula:
        // new_color_component = gray + saturation_factor * (original_color_component - gray)
        // This can also be written as:
        // new_color_component = (1 - saturation_factor) * gray + saturation_factor * original_color_component
        // This formula linearly interpolates between the grayscale version (when s=0)
        // and the original color (when s=1). If s > 1, it extrapolates.
        
        const newR = gray + s * (r - gray);
        const newG = gray + s * (g - gray);
        const newB = gray + s * (b - gray);
        
        // Assign the new RGB values.
        // The Uint8ClampedArray `data` automatically handles:
        // 1. Clamping values to the [0, 255] range.
        // 2. Rounding floating-point numbers to the nearest integer
        //    (typically using "round half to even" for .5 cases).
        data[i]   = newR;
        data[i+1] = newG;
        data[i+2] = newB;
    }

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

    return canvas;
}