Photo Vintage Filter Application

function processImage(originalImg, sepiaIntensity = 1.0, brightnessOffset = -10, contrastPercent = 20, vignetteStrength = 0.5, noiseAmount = 10) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // If the image has no dimensions (e.g., not loaded or invalid), return an empty canvas
    if (imgWidth === 0 || imgHeight === 0) {
        return canvas;
    }

    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data;

    const centerX = imgWidth / 2;
    const centerY = imgHeight / 2;
    // Calculate distance to a corner (max distance from center)
    const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);

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

        // 1. Sepia Tone
        if (sepiaIntensity > 0) {
            const sr = (r * 0.393) + (g * 0.769) + (b * 0.189);
            const sg = (r * 0.349) + (g * 0.686) + (b * 0.168);
            const sb = (r * 0.272) + (g * 0.534) + (b * 0.131);

            r = (1 - sepiaIntensity) * r + sepiaIntensity * sr;
            g = (1 - sepiaIntensity) * g + sepiaIntensity * sg;
            b = (1 - sepiaIntensity) * b + sepiaIntensity * sb;
        }

        // 2. Brightness Adjustment
        // brightnessOffset is directly added. E.g., -10 reduces brightness by 10 units.
        if (brightnessOffset !== 0) {
            r += brightnessOffset;
            g += brightnessOffset;
            b += brightnessOffset;
        }

        // 3. Contrast Adjustment
        // contrastPercent: e.g., 20 means +20% contrast. Factor becomes 1.2.
        // A contrastPercent of -50 means factor 0.5 (halved contrast).
        // A contrastPercent of 0 means factor 1.0 (no change).
        if (contrastPercent !== 0) {
            const contrastFactor = 1.0 + (contrastPercent / 100.0);
            r = (r - 128) * contrastFactor + 128;
            g = (g - 128) * contrastFactor + 128;
            b = (b - 128) * contrastFactor + 128;
        }
        
        // 4. Noise
        if (noiseAmount > 0) {
            // Generate noise in the range [-noiseAmount, +noiseAmount]
            const randomNoise = (Math.random() - 0.5) * 2 * noiseAmount;
            r += randomNoise;
            g += randomNoise;
            b += randomNoise;
        }

        // 5. Vignette Effect
        if (vignetteStrength > 0 && maxDist > 0) {
            const x = (i / 4) % imgWidth; // current pixel's x coordinate
            const y = Math.floor((i / 4) / imgWidth); // current pixel's y coordinate

            const dx = centerX - x;
            const dy = centerY - y;
            const dist = Math.sqrt(dx * dx + dy * dy);
            
            // vignetteEffect: normalized distance from center (0 at center, 1 at maxDist)
            const vignetteEffect = dist / maxDist; 
            
            // vignettePower controls the falloff curve. Higher values create a sharper edge.
            const vignettePower = 1.5; // This is a fixed internal parameter for typical vintage feel
            
            // darkness: how much to darken. Ranges from 0 (center) up to `vignetteStrength` (corners).
            const darkness = Math.pow(vignetteEffect, vignettePower) * vignetteStrength;
            
            // vignetteMultiplier: Factor to multiply color components.
            // Ranges from 1.0 (at center, no change) down to (1.0 - vignetteStrength) (at corners).
            const vignetteMultiplier = 1.0 - darkness;
            
            r *= vignetteMultiplier;
            g *= vignetteMultiplier;
            b *= vignetteMultiplier;
        }

        // Clamp values to [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 preserved
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}