Photo Exuberant Filter

function processImage(originalImg, saturationLevel = 1.5, contrastLevel = 1.2, warmthLevel = 10) {
    const canvas = document.createElement('canvas');
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    if (width === 0 || height === 0) {
        console.error("Image has zero dimensions, possibly not loaded or invalid.");
        canvas.width = 1; 
        canvas.height = 1;
        // Return a 1x1 transparent canvas for invalid input image dimensions.
        return canvas;
    }
    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d');
    if (!ctx) {
        console.error("Could not get 2D context from canvas.");
        // Return a blank canvas of the original image's size if context creation fails.
        return canvas;
    }
    
    try {
        ctx.drawImage(originalImg, 0, 0, width, height);
    } catch (e) {
        console.error("Error drawing the image onto the canvas:", e);
        // If drawImage fails (e.g., originalImg is not a valid image source recognized by canvas),
        // return the blank (but correctly sized) canvas.
        return canvas;
    }

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        console.error("Could not get ImageData. This can happen if the image is from a different origin without CORS headers (tainted canvas).", e);
        // If getImageData fails, the canvas currently holds the original image (drawn by drawImage).
        // Return this canvas, as pixel processing cannot be done.
        return canvas;
    }
    
    const data = imageData.data;

    // Parse and validate parameters.
    // Parameters can be passed as strings or numbers. Default values are numbers.
    // Convert to Number type and ensure they are valid numbers.
    const numSaturation = Number(saturationLevel);
    const numContrast = Number(contrastLevel);
    const numWarmth = Number(warmthLevel);

    // Use parsed value if it's a valid number, otherwise fallback to the function's hardcoded default.
    // This provides robustness against invalid inputs (e.g., "abc" or null).
    const effSaturation = !isNaN(numSaturation) ? numSaturation : 1.5;
    const effContrast = !isNaN(numContrast) ? numContrast : 1.2;
    const effWarmth = !isNaN(numWarmth) ? numWarmth : 10;

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        // data[i+3] is the alpha channel, which we'll leave unchanged.

        // 1. Saturation boost
        // Calculate luminance (perceived brightness or grayscale value) for the current pixel.
        const L = 0.299 * r + 0.587 * g + 0.114 * b;
        // Adjust each color component: move it further from luminance by the saturation factor.
        // If effSaturation is 1, no change. >1 increases saturation, <1 decreases.
        r = L + effSaturation * (r - L);
        g = L + effSaturation * (g - L);
        b = L + effSaturation * (b - L);

        // Clamp values to the 0-255 range after saturation.
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 2. Contrast adjustment
        // Adjust pixel intensity based on its distance from a midpoint (128).
        // If effContrast is 1, no change. >1 increases contras_AMOUNTt.
        r = 128 + effContrast * (r - 128);
        g = 128 + effContrast * (g - 128);
        b = 128 + effContrast * (b - 128);

        // Clamp values to the 0-255 range after contrast.
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 3. Warmth adjustment
        // Add warmth by increasing the red channel and slightly decreasing the blue channel.
        r += effWarmth;
        b -= effWarmth / 2; // Reducing blue enhances the perception of warmth.

        // Final clamp and round values before assigning back to the ImageData object.
        // Pixel data must be integers.
        data[i] = Math.round(Math.max(0, Math.min(255, r)));
        data[i + 1] = Math.round(Math.max(0, Math.min(255, g)));
        data[i + 2] = Math.round(Math.max(0, Math.min(255, b)));
    }

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