Pensive Photo Filter

function processImage(originalImg, desaturation = 0.7, blueTintStrength = 0.2, brightnessAdj = 0.95, vignetteStrength = 0.3) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // Optimisation hint for frequent getImageData/putImageData

    // Use naturalWidth/Height for the true dimensions of the image, fallback to width/height
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

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

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

    // Get the image data from the canvas
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    const centerX = width / 2;
    const centerY = height / 2;
    // Calculate the maximum distance from the center to a corner for vignette normalization
    const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);

    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
        // Calculate grayscale value using luminosity method
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;
        // Interpolate between original color and grayscale based on desaturation level
        let r_d = r * (1 - desaturation) + gray * desaturation;
        let g_d = g * (1 - desaturation) + gray * desaturation;
        let b_d = b * (1 - desaturation) + gray * desaturation;

        // 2. Tint (Cool/Blueish tint)
        // Apply multiplicative factors based on blueTintStrength to shift color balance
        // These factors aim to reduce red/green and slightly boost blue
        let r_t = r_d * (1 - 0.3 * blueTintStrength);
        let g_t = g_d * (1 - 0.15 * blueTintStrength);
        let b_t = b_d * (1 + 0.2 * blueTintStrength);

        // 3. Brightness Adjustment
        // Multiply by brightnessAdj factor
        let r_b = r_t * brightnessAdj;
        let g_b = g_t * brightnessAdj;
        let b_b = b_t * brightnessAdj;

        // 4. Vignette
        // Calculate current pixel's coordinates
        const pixelIndex = i / 4;
        const y = Math.floor(pixelIndex / width);
        const x = pixelIndex % width;
        
        const dx = x - centerX;
        const dy = y - centerY;
        const dist = Math.sqrt(dx * dx + dy * dy);
        
        // Calculate vignette factor.
        // Uses Math.pow(dist / maxDist, 1.5) for a smooth falloff.
        // v_factor is 1 at the center, decreasing towards edges.
        // At corners (where dist/maxDist approaches 1), vignette effect is strongest.
        const v_falloff = Math.pow(dist / maxDist, 1.5); // Falloff curve exponent
        const v_factor = 1.0 - v_falloff * vignetteStrength;
        
        let r_v = r_b * v_factor;
        let g_v = g_b * v_factor;
        let b_v = b_b * v_factor;

        // 5. Final Clamping
        // Ensure RGB values are within the valid [0, 255] range
        data[i]   = Math.max(0, Math.min(255, r_v));
        data[i+1] = Math.max(0, Math.min(255, g_v));
        data[i+2] = Math.max(0, Math.min(255, b_v));
        // Alpha channel (data[i+3]) remains unchanged
    }

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