Image Faded Nostalgia Filter

function processImage(
    originalImg, 
    sepiaAmount = 0.7,          // Strength of the sepia effect, 0.0 (no sepia) to 1.0 (full sepia).
    contrastAmount = 0.75,      // Contrast level, e.g., 0.0 (grey) to 2.0 (high contrast). 1.0 is original.
    brightnessAmount = 1.1,     // Brightness level, e.g., 0.0 (black) to 2.0 (very bright). 1.0 is original.
    fadeOverlayOpacity = 0.2,   // Opacity of the fade overlay, 0.0 (none) to 1.0 (full).
    fadeOverlayColorRgb = "240,230,210", // Color of the fade overlay as an "R,G,B" string (e.g., "255,250,220").
    vignetteStrength = 0.6,     // Opacity of the vignette effect at its darkest, 0.0 (none) to 1.0.
    vignetteColorRgb = "40,30,20",     // Color of the vignette as an "R,G,B" string (e.g., "0,0,0" for black).
    vignetteStart = 0.4         // Defines how far from the center the vignette effect starts. 0.0 (starts at center) to 1.0 (starts at edge an minimally visible).
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    // Ensure canvas has valid dimensions
    if (w === 0 || h === 0) {
        canvas.width = 0;
        canvas.height = 0;
        console.warn("Original image has zero width or height. Returning empty canvas.");
        return canvas;
    }
    
    canvas.width = w;
    canvas.height = h;

    // 1. Apply core image filters (Sepia, Contrast, Brightness)
    // These use the CanvasRenderingContext2D.filter property, similar to CSS filters.
    ctx.filter = `sepia(${sepiaAmount}) contrast(${contrastAmount}) brightness(${brightnessAmount})`;
    ctx.drawImage(originalImg, 0, 0, w, h);
    
    // Reset filter: subsequent drawing operations should not be affected by the above filters.
    ctx.filter = 'none';

    // 2. Apply fade overlay
    // This adds a semi-transparent color layer over the filtered image, contributing to the "faded" look.
    if (fadeOverlayOpacity > 0 && fadeOverlayOpacity <= 1) {
        const colorParts = fadeOverlayColorRgb.split(',').map(s => parseInt(s.trim(), 10));
        // Validate parsed color components
        if (colorParts.length === 3 && colorParts.every(num => !isNaN(num) && num >= 0 && num <= 255)) {
            const [fr, fg, fb] = colorParts;
            ctx.fillStyle = `rgba(${fr},${fg},${fb},${fadeOverlayOpacity})`;
            ctx.fillRect(0, 0, w, h);
        } else {
            console.warn("Invalid fadeOverlayColorRgb format or values. Expected 'R,G,B' string with numbers 0-255. Skipping fade overlay.");
        }
    }

    // 3. Apply vignette effect
    // This darkens the corners of the image, a common technique for a "nostalgia" or vintage photo feel.
    if (vignetteStrength > 0 && vignetteStrength <= 1 && vignetteStart >= 0 && vignetteStart <= 1) {
        const cx = w / 2;
        const cy = h / 2;
        
        // The outer radius of the vignette will reach the furthest corner of the image.
        const outerRadius = Math.hypot(cx, cy); // Equivalent to Math.sqrt(cx*cx + cy*cy)
        // The inner radius is where the vignette effect starts (it's transparent inside this radius).
        // vignetteStart is a percentage of outerRadius.
        const innerRadius = outerRadius * vignetteStart;

        const gradient = ctx.createRadialGradient(cx, cy, innerRadius, cx, cy, outerRadius);
        
        const vignetteColorParts = vignetteColorRgb.split(',').map(s => parseInt(s.trim(), 10));
        // Validate parsed color components
        if (vignetteColorParts.length === 3 && vignetteColorParts.every(num => !isNaN(num) && num >= 0 && num <= 255)) {
            const [vr, vg, vb] = vignetteColorParts;
            
            // The gradient transitions from fully transparent at innerRadius...
            gradient.addColorStop(0, `rgba(${vr},${vg},${vb},0)`); 
            // ...to the vignette color with specified strength at outerRadius.
            gradient.addColorStop(1, `rgba(${vr},${vg},${vb},${vignetteStrength})`);

            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, w, h);
        } else {
            console.warn("Invalid vignetteColorRgb format or values. Expected 'R,G,B' string with numbers 0-255. Skipping vignette.");
        }
    }

    return canvas;
}