Image Fuji QuickSnap Disposable Filter Effect Application

/**
 * Applies a Fuji QuickSnap Disposable Camera-like filter effect to an image.
 * This effect typically includes:
 * - Slightly increased contrast.
 * - Characteristic color shifts: emphasized greens and reds, slightly muted/shifted blues.
 * - Cyan/greenish tint in shadow areas.
 * - A noticeable vignette (darkening towards the edges).
 * - Simulated film grain.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 * @returns {HTMLCanvasElement} A new canvas element with the filter applied.
 */
function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can be a performance hint for browsers
    // when using getImageData/putImageData frequently, though support and actual impact vary.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

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

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

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    const width = canvas.width;
    const height = canvas.height;

    // --- Filter Parameters (tuned for Fuji QuickSnap look) ---

    // 1. Contrast adjustment
    const contrastFactor = 1.12; // Slightly boost contrast

    // 2. Color adjustments
    const redBoost = 1.04;       // Boost reds
    const greenBoost = 1.07;     // Boost greens (Fuji film characteristic)
    const blueToneFactor = 0.96; // Slightly reduce overall blue intensity or shift it warm

    // 3. Shadow tinting (add cool cyan/green tones to shadows)
    const shadowLuminanceThreshold = 85; // Pixels darker than this (0-255 scale) are considered shadows
    const shadowBlueTintAmount = 12;     // Amount of blue to add to shadows
    const shadowGreenTintAmount = 6;     // Amount of green to add to shadows

    // 4. Vignette effect
    const vignetteAmount = 0.30; // Max darkness at edges (0 to 1, e.g., 0.3 means 30% darker)
    const vignetteFalloff = 1.6; // Controls smoothness of vignette (higher is sharper/quicker falloff)

    // 5. Film Grain
    const grainIntensity = 8;   // Max pixel color deviation for grain (results in +/- grainIntensity)

    // --- Helper values for calculations ---
    const centerX = width / 2;
    const centerY = height / 2;
    // Max distance from center to a corner (for vignette normalization)
    const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);

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

        // Store original luminance for unbiased shadow detection.
        // A simple average is used for luminance here.
        const originalLuminance = (data[i] + data[i+1] + data[i+2]) / 3;

        // 1. Apply Contrast
        // Pushes values away from the midpoint (128)
        r = contrastFactor * (r - 128) + 128;
        g = contrastFactor * (g - 128) + 128;
        b = contrastFactor * (b - 128) + 128;

        // 2. Apply General Color Shifts
        r *= redBoost;
        g *= greenBoost;
        b *= blueToneFactor;

        // 3. Apply Shadow Tinting based on original luminance
        if (originalLuminance < shadowLuminanceThreshold) {
            b += shadowBlueTintAmount;
            g += shadowGreenTintAmount;
        }
        
        // 4. Apply Vignette
        const currentX = (i / 4) % width;
        const currentY = Math.floor((i / 4) / width);
        const dist = Math.sqrt(Math.pow(currentX - centerX, 2) + Math.pow(currentY - centerY, 2));
        
        const normalizedDist = dist / maxDist;
        // vignetteEffectStrength is 0 at center, up to vignetteAmount at edges
        const vignetteEffectStrength = vignetteAmount * Math.pow(normalizedDist, vignetteFalloff);
        // vignetteFactor is multiplier for brightness (1.0 at center, decreasing towards edges)
        const vignetteFactor = 1.0 - vignetteEffectStrength;
        
        r *= vignetteFactor;
        g *= vignetteFactor;
        b *= vignetteFactor;

        // 5. Apply Film Grain
        // Generates symmetrical noise around 0, from -grainIntensity to +grainIntensity
        const noise = (Math.random() - 0.5) * 2 * grainIntensity;
        r += noise;
        g += noise;
        b += noise;

        // Clamp all color channel values to the valid 0-255 range
        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]) is typically left unchanged
    }

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

    return canvas;
}