Photo Mysterious Filter Application

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

    // Use naturalWidth/Height for intrinsic 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 image data to manipulate pixels
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Helper function to clamp color values to the 0-255 range
    function clamp(value) {
        return Math.max(0, Math.min(255, Math.floor(value)));
    }

    // Parameters for the "mysterious" filter
    const desaturationFactor = 0.6; // 0 = grayscale, 1 = original saturation. 0.6 means 60% desaturation.
    const gamma = 1.45;             // Values > 1 darken the image and increase contrast in darker areas.
    const blueTintAmount = 20;      // Amount of blue to add.

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

        // 1. Desaturate the image
        // Calculate luminance (brightness) of the pixel
        const lum = 0.299 * r + 0.587 * g + 0.114 * b;
        // Interpolate between original color and luminance based on desaturationFactor
        r = r * (1 - desaturationFactor) + lum * desaturationFactor;
        g = g * (1 - desaturationFactor) + lum * desaturationFactor;
        b = b * (1 - desaturationFactor) + lum * desaturationFactor;

        // 2. Apply Gamma correction to darken and enhance contrast
        // This makes shadows deeper and darkens the overall image.
        r = 255 * Math.pow(r / 255, gamma);
        g = 255 * Math.pow(g / 255, gamma);
        b = 255 * Math.pow(b / 255, gamma);

        // 3. Apply a cool/blue tint
        // Slightly reduce red and green, and boost blue.
        let finalR = r * 0.92;
        let finalG = g * 0.96;
        let finalB = b + blueTintAmount;

        // Store the modified pixel data, clamping values
        data[i]   = clamp(finalR);
        data[i+1] = clamp(finalG);
        data[i+2] = clamp(finalB);
        // Alpha channel (data[i+3]) remains unchanged
    }

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

    // 4. Apply a Vignette effect (darkened corners)
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;

    // The vignette will extend to the corners of the image.
    const outerRadius = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2));
    // The central part of the image will be less affected or clear.
    const innerRadiusRatio = 0.20; // 20% of outerRadius will be the start of the vignette fade.

    const gradient = ctx.createRadialGradient(
        centerX, centerY, outerRadius * innerRadiusRatio, // Start circle
        centerX, centerY, outerRadius                   // End circle
    );

    // Define the gradient colors for the vignette.
    // It transitions from transparent in the center to a dark, slightly bluish tone at the edges.
    gradient.addColorStop(0, 'rgba(5, 10, 25, 0)');       // Center: fully transparent
    gradient.addColorStop(0.5, 'rgba(5, 10, 25, 0.35)');  // Mid-way: subtle dark blueish darkening
    gradient.addColorStop(1, 'rgba(0, 5, 20, 0.75)');    // Edges: strong dark blueish vignette

    // Apply the vignette gradient over the image
    ctx.fillStyle = gradient;
    // globalCompositeOperation 'source-over' is default for fillRect, and works here
    // because the gradient uses RGBA colors (alpha channel for transparency).
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    return canvas;
}