Image AGFA APX 25 Film Filter Effect Tool

function processImage(originalImg, contrast = 1.5, grain = 6) {
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can be a hint for optimization for repeated getImageData/putImageData calls.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Ensure parameters are numbers, in case string representations are passed
    const numContrast = Number(contrast);
    const numGrain = Number(grain);

    // Set canvas dimensions to the original image's dimensions
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // If canvas dimensions are zero (e.g., image not loaded properly), return empty canvas.
    if (canvas.width === 0 || canvas.height === 0) {
        return canvas;
    }

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray

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

        // 1. Convert to grayscale using the luminosity method (perceptual)
        // Standard weights: 0.299 R, 0.587 G, 0.114 B
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // 2. Apply contrast adjustment
        // Formula: newValue = (oldValue - midpoint) * contrastFactor + midpoint
        // Midpoint for a 0-255 range is 127.5.
        gray = (gray - 127.5) * numContrast + 127.5;
        
        // Clamp the gray value to ensure it remains within the 0-255 range
        // This is crucial as the contrast adjustment can push values outside this range.
        gray = Math.max(0, Math.min(255, gray));

        // 3. Simulate film grain
        // Add a small amount of random noise.
        // Math.random() produces [0, 1). (Math.random() - 0.5) produces [-0.5, 0.5).
        // So, noise will be in the range [-numGrain/2, numGrain/2).
        const noise = (Math.random() - 0.5) * numGrain;
        let finalValue = gray + noise;

        // The Uint8ClampedArray (data) will automatically clamp the finalValue
        // to the 0-255 range upon assignment. For example:
        // data[i] = -10 will result in data[i] being 0.
        // data[i] = 300 will result in data[i] being 255.
        // data[i] = 123.7 will result in data[i] being 124.
        
        data[i] = finalValue;     // Red channel
        data[i + 1] = finalValue; // Green channel
        data[i + 2] = finalValue; // Blue channel
    }

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

    // Return the canvas element with the applied effect
    return canvas;
}