Image 2000’s Style Enhancer

/**
 * Applies a 2000s-era digital photo effect to an image.
 * This includes increased saturation/contrast, a glow/bloom on highlights, digital noise, and a vignette
 * to mimic the look of early digital cameras.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} [saturation=60] The percentage to increase color saturation (e.g., 60 means 1.6x).
 * @param {number} [contrast=30] The percentage to increase contrast (e.g., 30 means 1.3x).
 * @param {number} [glow=8] The radius in pixels for the highlight bloom/glow effect. Set to 0 to disable.
 * @param {number} [noise=15] The intensity of the digital noise/grain. Set to 0 to disable.
 * @param {number} [vignette=40] The strength of the vignette (darkened corners) from 0 to 100. Set to 0 to disable.
 * @returns {HTMLCanvasElement} A new canvas element with the filter applied.
 */
function processImage(originalImg, saturation = 60, contrast = 30, glow = 8, noise = 15, vignette = 40) {
    // 1. Setup Canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

    // 2. Base Style: High saturation, contrast, and a warm tint.
    // Early digital cameras often had punchy but slightly off-balanced colors.
    const satValue = 1 + (saturation / 100);
    const conValue = 1 + (contrast / 100);
    const sepiaValue = 0.1; // A little sepia adds a nice warm, dated tint.
    const brightnessValue = 1.05; // Slightly blow out the highlights.

    ctx.filter = `saturate(${satValue}) contrast(${conValue}) sepia(${sepiaValue}) brightness(${brightnessValue})`;
    ctx.drawImage(originalImg, 0, 0, w, h);
    
    // 3. Glow/Bloom Effect: Mimics the harsh on-camera flash of the era.
    // This effect is applied before resetting the main filter.
    if (glow > 0) {
        // We composite the image onto itself with a 'lighter' blend mode,
        // which creates a blown-out look in bright areas. A blur spreads this effect out.
        ctx.globalCompositeOperation = 'lighter';
        ctx.globalAlpha = 0.25; // Control the intensity of the glow layer
        ctx.filter = `blur(${glow}px) brightness(1.2)`;
        ctx.drawImage(canvas, 0, 0); // Re-draw the canvas content onto itself with the new effects
    }
    
    // 4. Reset filters and composite modes for the next steps
    ctx.filter = 'none';
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 1.0;

    // 5. Digital Noise: Mimics the noisy sensors of early digital cameras.
    if (noise > 0) {
        const imageData = ctx.getImageData(0, 0, w, h);
        const data = imageData.data;
        // Iterate over each pixel and add a random value to its color channels.
        for (let i = 0; i < data.length; i += 4) {
            // Don't add noise to transparent pixels
            if (data[i+3] === 0) continue;
            
            const grain = (Math.random() - 0.5) * noise;
            data[i] = data[i] + grain;     // Red
            data[i + 1] = data[i + 1] + grain; // Green
            data[i + 2] = data[i + 2] + grain; // Blue
        }
        ctx.putImageData(imageData, 0, 0);
    }

    // 6. Vignette Effect: Darkens the corners, a common lens artifact.
    if (vignette > 0) {
        const vignetteStrength = vignette / 100;
        const outerRadius = Math.sqrt(Math.pow(w / 2, 2) + Math.pow(h / 2, 2));
        const gradient = ctx.createRadialGradient(w / 2, h / 2, 0, w / 2, h / 2, outerRadius);
        
        // The gradient starts transparent in the middle and fades to a semi-transparent black.
        // A larger start value for the transparent stop makes the vignette less prominent in the center.
        gradient.addColorStop(0.4, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, `rgba(0,0,0,${vignetteStrength})`);

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
    }
    
    return canvas;
}