Image 220 Film Format Filter Effect

async function processImage(
    originalImg,
    grainStrength = 0.05,     // 0 to 1: intensity of film grain
    desaturation = 0.15,      // 0 to 1: 0 is full color, 1 is grayscale
    contrastFactor = 1.15,    // >=0: 1 is no change, >1 increases contrast, <1 decreases
    warmth = 0.1,             // 0 to 1: strength of sepia/warm tint
    vignetteStrength = 0.4,   // 0 to 1: darkness of vignette edges
    vignetteSoftness = 0.6    // 0 to 1: 0 for sharp edge, 1 for soft fade from center
) {
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } for potential performance hint with getImageData
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Assuming originalImg is loaded and valid as per problem description.
    // naturalWidth/Height are preferred as they reflect actual image dimensions.
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;

    // Handle cases where image dimensions might be invalid or zero.
    if (w === 0 || h === 0) {
        console.error("Image has zero width or height. Returning an empty canvas.");
        // The function must return a canvas, so return the (potentially 0x0) canvas.
        canvas.width = w; 
        canvas.height = h;
        return canvas;
    }

    canvas.width = w;
    canvas.height = h;

    // Clamp parameters to ensure they are within typical operational ranges
    grainStrength = Math.max(0, Math.min(1, grainStrength));
    desaturation = Math.max(0, Math.min(1, desaturation));
    contrastFactor = Math.max(0, contrastFactor); 
    warmth = Math.max(0, Math.min(1, warmth));
    vignetteStrength = Math.max(0, Math.min(1, vignetteStrength));
    vignetteSoftness = Math.max(0, Math.min(1, vignetteSoftness));

    // 1. Apply base color/tone adjustments using CanvasRenderingContext2D.filter
    const saturationValue = 1 - desaturation; // Convert desaturation (0-1) to saturation for filter (1-0)
    const sepiaValue = warmth; // Warmth (0-1) maps directly to sepia strength for filter (0-1)

    let filterString = '';
    // Add filters to the string only if they have an effect compared to default values
    if (saturationValue < 1) { // saturate(1) is the default (no change)
        filterString += `saturate(${saturationValue}) `;
    }
    if (contrastFactor !== 1) { // contrast(1) is the default
        filterString += `contrast(${contrastFactor}) `;
    }
    if (sepiaValue > 0) { // sepia(0) is the default
        filterString += `sepia(${sepiaValue}) `;
    }

    if (filterString.trim() !== '') {
        ctx.filter = filterString.trim();
    }
    
    // Draw the image onto the canvas. Filters are applied at this stage.
    ctx.drawImage(originalImg, 0, 0, w, h);
    
    // Reset filters if any were applied, so subsequent operations are not affected.
    if (filterString.trim() !== '') {
        ctx.filter = 'none';
    }

    // 2. Add Film Grain (pixel manipulation)
    if (grainStrength > 0) {
        const imageData = ctx.getImageData(0, 0, w, h);
        const data = imageData.data;
        // grainIntensity determines the max deviation for noise (e.g., +/- 17.5 for grainStrength=0.5, factor 35)
        const grainIntensity = grainStrength * 35; 

        for (let i = 0; i < data.length; i += 4) {
            // Add chromatic grain (independent noise for R, G, B channels)
            const noiseR = (Math.random() - 0.5) * grainIntensity;
            const noiseG = (Math.random() - 0.5) * grainIntensity;
            const noiseB = (Math.random() - 0.5) * grainIntensity;

            data[i]     = Math.min(255, Math.max(0, data[i]     + noiseR));
            data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + noiseG));
            data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + noiseB));
            // Alpha channel (data[i+3]) remains unchanged
        }
        ctx.putImageData(imageData, 0, 0);
    }

    // 3. Apply Vignetting (gradient overlay)
    if (vignetteStrength > 0) {
        ctx.save(); // Save current canvas state
        
        // 'multiply' blend mode darkens the image where the overlay is dark.
        ctx.globalCompositeOperation = 'multiply'; 

        const centerX = w / 2;
        const centerY = h / 2;
        // Outer radius of the gradient should reach the furthest corners of the image.
        const outerRadius = Math.sqrt(centerX * centerX + centerY * centerY); 
        
        const vignetteGradient = ctx.createRadialGradient(
            centerX, centerY, 0,             // Inner circle (center of image)
            centerX, centerY, outerRadius    // Outer circle (reaches corners)
        );
        
        // Vignette darkens from transparent black at center to `vignetteStrength` black at edges.
        const vignetteEdgeColor = `rgba(0, 0, 0, ${vignetteStrength})`;
        const vignetteCenterColor = `rgba(0, 0, 0, 0)`; // Transparent black

        // `midPointStop` is the radius (fraction of `outerRadius`) where the clear area ends.
        // `vignetteSoftness` = 1: `midPointStop` = 0 (gradient from center).
        // `vignetteSoftness` = 0: `midPointStop` = 1 (sharp edge).
        // `vignetteSoftness` = 0.6: `midPointStop` = 0.4 (clear up to 40% radius).
        const midPointStop = Math.max(0, Math.min(1, 1 - vignetteSoftness));

        vignetteGradient.addColorStop(0, vignetteCenterColor); 
        // Ensure the clear area in the center by adding a stop if midPoint is distinct
        if (midPointStop > 0) { 
            vignetteGradient.addColorStop(midPointStop, vignetteCenterColor);
        }
        vignetteGradient.addColorStop(1, vignetteEdgeColor); // Darkest at the edge
        
        ctx.fillStyle = vignetteGradient;
        ctx.fillRect(0, 0, w, h); // Apply vignette overlay
        
        ctx.restore(); // Restore canvas state to before vignette
    }

    return canvas;
}