Image Antique Photo Filter

function processImage(originalImg, sepiaIntensity = 1.0, noiseAmount = 0.1) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height if available, otherwise use width/height
    // This ensures we're working with the image's actual dimensions
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    canvas.width = width;
    canvas.height = height;

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

    // Get the image data from the canvas
    // If width or height is 0, getImageData can throw an error or return empty data.
    // We assume originalImg is a loaded image with valid dimensions.
    if (width === 0 || height === 0) {
        // Return an empty canvas or handle as an error if dimensions are invalid
        // For simplicity, returning the current (possibly empty) canvas.
        return canvas;
    }
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Clamp parameters to their valid ranges
    sepiaIntensity = Math.max(0, Math.min(1, sepiaIntensity));
    noiseAmount = Math.max(0, Math.min(1, noiseAmount));

    // Define the maximum pixel value change for noise.
    // noiseAmount will scale this value. E.g., if noiseAmount is 0.1, actual noise intensity is 10% of MAX_NOISE_PIXEL_DELTA.
    const MAX_NOISE_PIXEL_DELTA = 30; 

    // Iterate over each pixel (RGBA)
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i+1];
        let b = data[i+2];
        // Alpha channel (data[i+3]) is preserved

        // 1. Apply Sepia Tone
        if (sepiaIntensity > 0) {
            // Standard sepia calculation coefficients
            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);

            // Interpolate between original and sepia based on intensity
            // Clamping individual sepia components (sr, sg, sb) before interpolation is not strictly
            // necessary if the final mixed value is clamped, but it can prevent intermediate overflow
            // if the coefficients sum to > 1 for certain r,g,b values. Here, simple weighting.
            // Clamping to 255 for sr,sg,sb before interpolation is safer.
            const sepiaR = Math.min(255, sr);
            const sepiaG = Math.min(255, sg);
            const sepiaB = Math.min(255, sb);

            r = (r * (1 - sepiaIntensity)) + (sepiaR * sepiaIntensity);
            g = (g * (1 - sepiaIntensity)) + (sepiaG * sepiaIntensity);
            b = (b * (1 - sepiaIntensity)) + (sepiaB * sepiaIntensity);
        }

        // 2. Apply Noise
        if (noiseAmount > 0) {
            // Generate noise: a random value between -1 and 1, scaled by noiseAmount and MAX_NOISE_PIXEL_DELTA
            const noise = (Math.random() - 0.5) * 2 * noiseAmount * MAX_NOISE_PIXEL_DELTA;
            r += noise;
            g += noise;
            b += noise;
        }
        
        // Clamp final RGB values to the 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));
    }

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

    return canvas;
}