Photo Somber Filter Application

function processImage(originalImg, desaturationRatio = 0.7, brightnessFactor = 0.9, coolTintIntensity = 0.2) {

    let currentDesaturationRatio = Number(desaturationRatio);
    let currentBrightnessFactor = Number(brightnessFactor);
    let currentCoolTintIntensity = Number(coolTintIntensity);

    // Set to default if parsing failed or is not a finite number
    if (!isFinite(currentDesaturationRatio)) { currentDesaturationRatio = 0.7; }
    if (!isFinite(currentBrightnessFactor)) { currentBrightnessFactor = 0.9; }
    if (!isFinite(currentCoolTintIntensity)) { currentCoolTintIntensity = 0.2; }

    // Clamp parameters to sensible ranges
    currentDesaturationRatio = Math.max(0, Math.min(1, currentDesaturationRatio));
    currentBrightnessFactor = Math.max(0, Math.min(2, currentBrightnessFactor)); // Min 0 to avoid negative colors, max 2 for reasonable brightening
    currentCoolTintIntensity = Math.max(0, Math.min(1, currentCoolTintIntensity));

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

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

    if (imgWidth === 0 || imgHeight === 0) {
        // Handle cases where image might not have loaded yet or has no dimensions.
        // Return an empty canvas (could be 0x0 if imgWidth/Height are 0).
        canvas.width = imgWidth;
        canvas.height = imgHeight;
        // console.warn("Image has zero width or height. Returning an empty canvas.");
        return canvas;
    }

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

    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    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];
        // Alpha (data[i+3]) is preserved

        // 1. Desaturate
        // Using luminance method for grayscale baseline
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;
        r = r * (1 - currentDesaturationRatio) + gray * currentDesaturationRatio;
        g = g * (1 - currentDesaturationRatio) + gray * currentDesaturationRatio;
        b = b * (1 - currentDesaturationRatio) + gray * currentDesaturationRatio;

        // 2. Adjust Brightness
        r *= currentBrightnessFactor;
        g *= currentBrightnessFactor;
        b *= currentBrightnessFactor;

        // 3. Apply Cool Tint
        // This makes it "cooler" by reducing red slightly and increasing blue.
        // The intensity of the tint is controlled by currentCoolTintIntensity.
        if (currentCoolTintIntensity > 0) {
            // Define maximum extents of tinting effects
            const maxRedReductionRatio = 0.15; // Reduce red component by up to 15%
            const maxBlueIncreaseRatio = 0.20; // Increase blue component by up to 20% (multiplicative)
            const flatBlueIncreaseAmount = 20;   // Add up to 20 to the blue component (additive)

            r = r * (1 - (maxRedReductionRatio * currentCoolTintIntensity));
            // Green can be left as is, or slightly reduced for a more cinematic/moody somber look
            // g = g * (1 - (0.05 * currentCoolTintIntensity)); 
            b = b * (1 + (maxBlueIncreaseRatio * currentCoolTintIntensity)) + (flatBlueIncreaseAmount * currentCoolTintIntensity);
        }

        // 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));
    }

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