Image Retro Effect Applicator

/**
 * Applies a retro effect (sepia, noise, vignette) to an image.
 *
 * @param {HTMLImageElement} originalImg The original image object.
 * @param {number} [sepiaAmount=0.7] The intensity of the sepia effect (0 to 1). Default is 0.7.
 * @param {number} [noiseAmount=0.1] The intensity of the noise effect (0 to 1). Default is 0.1.
 * @param {number} [vignetteAmount=0.5] The intensity of the vignette effect (0 to 1). Default is 0.5.
 * @returns {HTMLCanvasElement} A canvas element displaying the image with the retro effect.
 */
function processImage(originalImg, sepiaAmount = 0.7, noiseAmount = 0.1, vignetteAmount = 0.5) {
    // Ensure parameters are treated as numbers and are within valid range
    const sepia = Math.max(0, Math.min(1, Number(sepiaAmount) || 0));
    const noise = Math.max(0, Math.min(1, Number(noiseAmount) || 0));
    const vignette = Math.max(0, Math.min(1, Number(vignetteAmount) || 0));

    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the image
    // Use naturalWidth/Height to get the original dimensions
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

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

    // Get the image data object
    const imageData = ctx.getImageData(0, 0, width, height);
    // The data property is a flat Uint8ClampedArray: [R1, G1, B1, A1, R2, G2, B2, A2, ...]
    const data = imageData.data;

    const centerX = width / 2;
    const centerY = height / 2;
    // Maximum distance from center (to a corner) for vignette calculation
    const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);

    // Iterate over each pixel (4 bytes at a time: R, G, B, A)
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        const originalR = r;
        const originalG = g;
        const originalB = b;

        // 1. Apply Sepia Filter
        if (sepia > 0) {
            // Standard sepia calculation
            const sepiaR = Math.min(255, 0.393 * originalR + 0.769 * originalG + 0.189 * originalB);
            const sepiaG = Math.min(255, 0.349 * originalR + 0.686 * originalG + 0.168 * originalB);
            const sepiaB = Math.min(255, 0.272 * originalR + 0.534 * originalG + 0.131 * originalB);

            // Interpolate between original and sepia based on sepiaAmount
            r = (1 - sepia) * originalR + sepia * sepiaR;
            g = (1 - sepia) * originalG + sepia * sepiaG;
            b = (1 - sepia) * originalB + sepia * sepiaB;
        }

        // 2. Add Noise
        if (noise > 0) {
            // Generate noise value between -127*noise and +127*noise
            const noiseVal = (Math.random() - 0.5) * 2 * noise * 127;
            r += noiseVal;
            g += noiseVal;
            b += noiseVal;
        }

        // 3. Apply Vignette Effect
        if (vignette > 0) {
            // Calculate pixel coordinates
            const pixelIndex = i / 4;
            const x = pixelIndex % width;
            const y = Math.floor(pixelIndex / width);

            // Calculate distance from center
            const dist = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));

            // Normalize distance (0 at center, 1 at corners)
            const normDist = dist / maxDist;

            // Calculate darkening factor based on distance and vignette amount.
            // Using power of 1.8 for a smoother falloff than quadratic (power of 2).
            const darkness = Math.max(0, 1.0 - vignette * Math.pow(normDist, 1.8));

            // Apply darkening
            r *= darkness;
            g *= darkness;
            b *= darkness;
        }

        // Clamp values R, G, B 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]) remains unchanged
    }

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

    // Return the canvas element. It can be displayed directly in a div.
    return canvas;
}