Image Push-Processed Film Filter Effect Tool

function processImage(originalImg, contrastFactor = 1.5, saturationFactor = 1.2, grainAmount = 25) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image is loaded before trying to get its 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 pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Adjust parameters to be somewhat intuitive
    // Contrast: 1.0 is no change. > 1.0 increases contrast.
    // Saturation: 1.0 is no change. > 1.0 increases saturation. 0 is grayscale.
    // Grain: 0 is no grain. Higher values mean more grain.

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

        // 1. Apply Contrast
        // The formula maps [0, 255] to [-128, 127], scales, then maps back.
        r = contrastFactor * (r - 128) + 128;
        g = contrastFactor * (g - 128) + 128;
        b = contrastFactor * (b - 128) + 128;

        // Clamp after contrast
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));

        // 2. Apply Saturation
        if (saturationFactor !== 1.0) {
            // Calculate luminance (grayscale value) using standard coefficients
            // Use the contrast-adjusted values
            const lum = 0.299 * r + 0.587 * g + 0.114 * b;
            
            // Interpolate between grayscale and original color
            r = lum + saturationFactor * (r - lum);
            g = lum + saturationFactor * (g - lum);
            b = lum + saturationFactor * (b - lum);

            // Clamp after saturation
            r = Math.max(0, Math.min(255, r));
            g = Math.max(0, Math.min(255, g));
            b = Math.max(0, Math.min(255, b));
        }
        
        // 3. Apply Grain
        if (grainAmount > 0) {
            // Generate a random offset for grain.
            // (Math.random() - 0.5) creates a value between -0.5 and 0.5
            const grainOffset = (Math.random() - 0.5) * grainAmount;
            r += grainOffset;
            g += grainOffset;
            b += grainOffset;

            // Clamp after grain
            r = Math.max(0, Math.min(255, r));
            g = Math.max(0, Math.min(255, g));
            b = Math.max(0, Math.min(255, b));
        }

        // Assign the modified pixel values back to the imageData
        data[i] = r;
        data[i + 1] = g;
        data[i + 2] = b;
        // Alpha channel (data[i + 3]) remains unchanged
    }

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

    return canvas;
}