Photo Joyful Filter

function processImage(originalImg, brightnessAmount = 15, saturationFactor = 1.2, warmthAmount = 20, contrastFactor = 1.05) {
    // Ensure parameters are numbers
    brightnessAmount = Number(brightnessAmount);
    saturationFactor = Number(saturationFactor);
    warmthAmount = Number(warmthAmount);
    contrastFactor = Number(contrastFactor);

    // Helper function to convert RGB to HSL
    // r, g, b are in [0, 255]
    // Returns h, s, l in [0, 1]
    function rgbToHsl(r, g, b) {
        r /= 255; g /= 255; b /= 255;
        const max = Math.max(r, g, b), min = Math.min(r, g, b);
        let h, s, l = (max + min) / 2;

        if (max === min) {
            h = s = 0; // achromatic
        } 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; 
        }
        return [h, s, l];
    }

    // Helper function to convert HSL to RGB
    // h, s, l are in [0, 1]
    // Returns r, g, b in [0, 255] (rounded)
    function hslToRgb(h, s, l) {
        let r_out, g_out, b_out;
        if (s === 0) {
            r_out = g_out = b_out = 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;
            r_out = hue2rgb(p, q, h + 1/3);
            g_out = hue2rgb(p, q, h);
            b_out = hue2rgb(p, q, h - 1/3);
        }
        return [Math.round(r_out * 255), Math.round(g_out * 255), Math.round(b_out * 255)];
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    canvas.width = width;
    canvas.height = height;

    if (width === 0 || height === 0) {
        console.error("Photo Joyful Filter: Image has zero dimensions. Ensure it is loaded before processing.");
        // Return an empty canvas, as per function signature.
        return canvas; 
    }

    ctx.drawImage(originalImg, 0, 0, width, height);

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        console.error("Photo Joyful Filter: Could not getImageData. This may be due to a tainted canvas (e.g., cross-origin image without CORS).", e);
        // Return the canvas with the original image drawn, as processing cannot continue.
        return canvas;
    }
    
    const data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
        let r_orig = data[i];
        let g_orig = data[i+1];
        let b_orig = data[i+2];

        // 1. Apply Warmth: increases red, slightly less green, and reduces blue.
        // Values can go outside 0-255 temporarily.
        let r_w = r_orig + warmthAmount;
        let g_w = g_orig + warmthAmount * 0.7; // Adjust green for a pleasant yellow/orange warmth
        let b_w = b_orig - warmthAmount * 0.3; // Reduce blue to enhance warmth

        // Clamp values before HSL conversion as HSL functions expect RGB in [0,255]
        let r_clamped_for_hsl = Math.max(0, Math.min(255, r_w));
        let g_clamped_for_hsl = Math.max(0, Math.min(255, g_w));
        let b_clamped_for_hsl = Math.max(0, Math.min(255, b_w));
        
        // 2. Apply Saturation using HSL
        // Convert warm-adjusted (and clamped) RGB to HSL
        let [h, s_hsl, l_hsl] = rgbToHsl(r_clamped_for_hsl, g_clamped_for_hsl, b_clamped_for_hsl);
        
        // Adjust saturation
        s_hsl *= saturationFactor;
        s_hsl = Math.max(0, Math.min(1, s_hsl)); // Clamp saturation s to [0, 1]

        // Convert back to RGB
        let [r_sat, g_sat, b_sat] = hslToRgb(h, s_hsl, l_hsl);
        // r_sat, g_sat, b_sat are now in [0, 255] and integers.
        
        // 3. Apply Contrast
        // Operates around the midpoint 128. Values can go outside [0, 255].
        let r_con = contrastFactor * (r_sat - 128) + 128;
        let g_con = contrastFactor * (g_sat - 128) + 128;
        let b_con = contrastFactor * (b_sat - 128) + 128;
        
        // 4. Apply Brightness
        // Additive brightness. Values can further go outside [0, 255].
        let r_final = r_con + brightnessAmount;
        let g_final = g_con + brightnessAmount;
        let b_final = b_con + brightnessAmount;

        // 5. Clamp final values to [0, 255] and assign to image data
        data[i]   = Math.max(0, Math.min(255, Math.round(r_final)));
        data[i+1] = Math.max(0, Math.min(255, Math.round(g_final)));
        data[i+2] = Math.max(0, Math.min(255, Math.round(b_final)));
        // Alpha channel (data[i+3]) remains unchanged
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}