Gloomy Photo Filter Tool

function processImage(originalImg, desaturation = 0.6, brightness = 0.8, coolShift = 25) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // Opt-in for frequent readback

    // Ensure parameters are numbers
    const numDesaturation = Number(desaturation);
    const numBrightness = Number(brightness);
    const numCoolShift = Number(coolShift);

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

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

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray

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

        // 1. Desaturation
        // Lerp towards luma: color = color * (1-desat) + luma * desat
        // which is equivalent to: color = color + desat * (luma - color)
        const luma = 0.299 * r + 0.587 * g + 0.114 * b;
        r = r + numDesaturation * (luma - r);
        g = g + numDesaturation * (luma - g);
        b = b + numDesaturation * (luma - b);

        // 2. Cool Tint (Shift towards blue, away from red)
        // Add to blue channel, subtract moderately from red channel.
        // Green channel can be left as is or slightly reduced.
        r = r - numCoolShift * 0.5; // Reduce red
        // g = g - numCoolShift * 0.1; // Optionally, slightly reduce green
        b = b + numCoolShift;       // Increase blue

        // 3. Brightness adjustment
        // Mutiplies each channel by the brightness factor.
        // Factors < 1.0 darken, > 1.0 lighten. For gloomy, expect < 1.0.
        r *= numBrightness;
        g *= numBrightness;
        b *= numBrightness;

        // Ensure values are within the 0-255 range.
        // Uint8ClampedArray handles clamping on assignment, but it's good practice
        // to clamp before assignment if intermediate values might be used elsewhere
        // or if precision matters before clamping.
        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;
}