Cheerful Photo Filter

function processImage(originalImg, brightness = 1.1, saturation = 1.2, warmth = 10) {
    // Ensure parameters are numbers
    const brightnessFactor = Number(brightness);
    const saturationFactor = Number(saturation);
    const warmthAmount = Number(warmth);

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image is loaded, otherwise naturalWidth/Height might be 0
    if (originalImg.complete && originalImg.naturalWidth !== 0) {
        canvas.width = originalImg.naturalWidth;
        canvas.height = originalImg.naturalHeight;
    } else {
        // Fallback or error handling if image not loaded, though problem implies valid Image object
        // For robustness, one might wait for onload or use provided width/height if available
        // For this problem, we assume originalImg is a fully loaded Image object.
        // If naturalWidth/Height are 0, let's use its width/height attributes if set
        canvas.width = originalImg.width || 300; // Default if completely unavailable
        canvas.height = originalImg.height || 150; // Default if completely unavailable
    }
    

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

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        // 1. Apply brightness
        // Avoid making black pixels (0,0,0) non-black if brightnessFactor > 0
        if (r !== 0) r *= brightnessFactor;
        if (g !== 0) g *= brightnessFactor;
        if (b !== 0) b *= brightnessFactor;

        // 2. Apply saturation
        // Calculate luminance (perceptual brightness) using current r, g, b
        const lum = 0.299 * r + 0.587 * g + 0.114 * b;
        // Interpolate between grayscale (lum) and the color component
        // If saturationFactor is 1, color remains unchanged.
        // If saturationFactor is 0, color becomes grayscale.
        // If saturationFactor > 1, saturation increases.
        r = lum + (r - lum) * saturationFactor;
        g = lum + (g - lum) * saturationFactor;
        b = lum + (b - lum) * saturationFactor;

        // 3. Apply warmth (add a yellowish/orangish tint)
        r += warmthAmount;
        g += warmthAmount * 0.75; // Add less to green to make it more orange/reddish warm
        b -= warmthAmount * 0.25; // Slightly reduce blue to enhance warmth perception


        // Clamp values to [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));
        // Alpha channel (data[i + 3]) remains unchanged
    }

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