Calm Photo Filter

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure using natural dimensions of the image
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]

    // Define filter parameters for a "calm" effect
    const desaturationAmount = 0.30; // 30% desaturation
    const coolRedAdjust = -15;       // Reduce red component
    const coolGreenAdjust = 5;       // Slightly increase green component (for a hint of teal/cyan)
    const coolBlueAdjust = 20;       // Increase blue component
    const brightnessIncrease = 10;   // Add a bit of brightness

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        // Alpha channel (data[i+3]) is preserved

        // 1. Desaturation
        // Standard luminance calculation
        const L = 0.299 * r + 0.587 * g + 0.114 * b;
        let r_desat = r * (1 - desaturationAmount) + L * desaturationAmount;
        let g_desat = g * (1 - desaturationAmount) + L * desaturationAmount;
        let b_desat = b * (1 - desaturationAmount) + L * desaturationAmount;

        // 2. Apply cool color tint
        let r_tinted = r_desat + coolRedAdjust;
        let g_tinted = g_desat + coolGreenAdjust;
        let b_tinted = b_desat + coolBlueAdjust;

        // 3. Apply brightness adjustment
        let r_final = r_tinted + brightnessIncrease;
        let g_final = g_tinted + brightnessIncrease;
        let b_final = b_tinted + brightnessIncrease;

        // Clamp values to the 0-255 range and round to integers
        data[i] = Math.round(Math.max(0, Math.min(255, r_final)));
        data[i + 1] = Math.round(Math.max(0, Math.min(255, g_final)));
        data[i + 2] = Math.round(Math.max(0, Math.min(255, b_final)));
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}