Image Saturation Boost Filter

function processImage(originalImg, boostAmountInput = 1.5) {

    let boostAmount = Number(boostAmountInput);
    // If boostAmountInput was not a number (e.g., a string that's not a valid number),
    // Number(boostAmountInput) will be NaN.
    if (isNaN(boostAmount)) {
        boostAmount = 1.5; // Fallback to default value
    }
    // Saturation boost factor should be non-negative.
    // A factor of 0 makes the image grayscale.
    // A factor of 1 leaves saturation unchanged.
    // Factors > 1 increase saturation.
    boostAmount = Math.max(0, boostAmount);

    // Helper function: Convert RGB to HSL
    // Input R, G, B are in the range [0, 255].
    // Output H is in the range [0, 360), S and L are in the range [0, 1].
    function rgbToHsl(r, g, b) {
        r /= 255;
        g /= 255;
        b /= 255;
        const max = Math.max(r, g, b);
        const min = Math.min(r, g, b);
        let h, s;
        const l = (max + min) / 2;

        if (max === min) {
            h = s = 0; // Achromatic (grayscale)
        } else {
            const d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch (max) {
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6; // Normalize h to [0, 1)
        }
        return { h: h * 360, s: s, l: l };
    }

    // Helper function: Convert HSL to RGB
    // Input H is in the range [0, 360), S and L are in the range [0, 1].
    // Output R, G, B are in the range [0, 255].
    function hslToRgb(h, s, l) {
        let r, g, b;

        if (s === 0) {
            r = g = b = l; // Achromatic
        } else {
            const hue2rgb = (p, q, t) => {
                if (t < 0) t += 1;
                if (t > 1) t -= 1;
                if (t < 1 / 6) return p + (q - p) * 6 * t;
                if (t < 1 / 2) return q;
                if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
                return p;
            };
            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            const p = 2 * l - q;
            h /= 360; // Normalize H to [0, 1) for calculations
            r = hue2rgb(p, q, h + 1 / 3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1 / 3);
        }
        return {
            r: Math.round(r * 255),
            g: Math.round(g * 255),
            b: Math.round(b * 255)
        };
    }

    const canvas = document.createElement('canvas');
    // Add willReadFrequently hint for potential performance optimization if the image is processed often
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Use naturalWidth/Height for intrinsic dimensions, fallback to width/height (e.g., for styled images or other elements)
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

    // If the image has no dimensions (e.g., not loaded or an empty image source),
    // return an empty canvas (it will be 0x0 if imgWidth/Height are 0).
    if (imgWidth === 0 || imgHeight === 0) {
        return canvas;
    }

    try {
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This might happen if originalImg is not a valid image source.
        // Create a new canvas to display an error message.
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = imgWidth || 100; // Use original image dimensions or a fallback
        errorCanvas.height = imgHeight || 100;
        const errorCtx = errorCanvas.getContext('2d');
        errorCtx.fillStyle = 'lightgray';
        errorCtx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
        errorCtx.fillStyle = 'red';
        errorCtx.font = '12px Arial';
        errorCtx.textAlign = 'center';
        errorCtx.textBaseline = 'middle';
        errorCtx.fillText('Error: Could not draw the original image.', errorCanvas.width / 2, errorCanvas.height / 2);
        return errorCanvas;
    }

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This commonly occurs due to cross-origin security restrictions (tainted canvas)
        // if the image is loaded from a different domain without CORS approval.
        // Create a new canvas to display an error message.
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = imgWidth || 100; 
        errorCanvas.height = imgHeight || 100;
        const errorCtx = errorCanvas.getContext('2d');
        errorCtx.fillStyle = 'lightgray';
        errorCtx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
        errorCtx.fillStyle = 'red';
        errorCtx.font = '12px Arial';
        errorCtx.textAlign = 'center';
        errorCtx.textBaseline = 'middle';
        const errorMessage = `Error: Cannot process image data.`;
        const hintMessage = `(This might be a CORS issue if the image is from another domain.)`;
        errorCtx.fillText(errorMessage, errorCanvas.width / 2, errorCanvas.height / 2 - 8);
        errorCtx.fillText(hintMessage, errorCanvas.width / 2, errorCanvas.height / 2 + 8);
        return errorCanvas;
    }
    
    const data = imageData.data; // data is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha channel (data[i+3]) is preserved by default.

        const hsl = rgbToHsl(r, g, b);
        
        // Boost saturation
        hsl.s *= boostAmount;
        // Clamp saturation: 0 <= s <= 1
        hsl.s = Math.max(0, Math.min(1, hsl.s));

        const newRgb = hslToRgb(hsl.h, hsl.s, hsl.l);

        data[i] = newRgb.r;
        data[i + 1] = newRgb.g;
        data[i + 2] = newRgb.b;
    }

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

    return canvas;
}