Image Expired Film Filter Effect Tool

function processImage(originalImg, saturationReduction = 0.5, contrastFactor = 1.2, tintColorStr = "220,190,150", tintStrength = 0.2, grainAmount = 20) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure using natural dimensions of the image
    // For an Image object, naturalWidth/Height are the intrinsic dimensions.
    // Fallback to width/height if naturalWidth/Height somehow aren't available.
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Get image data to manipulate pixels
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Parse tint color string "R,G,B" into an array of numbers
    // Default to [0,0,0] (black) for components if parsing fails or not enough values
    const parsedTint = tintColorStr.split(',').map(s => parseInt(s.trim(), 10));
    const tintR_param = isNaN(parsedTint[0]) ? 0 : parsedTint[0];
    const tintG_param = isNaN(parsedTint[1]) ? 0 : parsedTint[1];
    const tintB_param = isNaN(parsedTint[2]) ? 0 : parsedTint[2];

    // Helper function to clamp values between min and max
    function clamp(value, min = 0, max = 255) {
        return Math.max(min, Math.min(value, max));
    }

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

        // 1. Desaturation
        // Values between 0 (no change) and 1 (full desaturation to grayscale)
        if (saturationReduction > 0 && saturationReduction <= 1) {
            // Luminosity method for grayscale conversion (standard weights)
            const grayscale = 0.299 * r + 0.587 * g + 0.114 * b;
            r = grayscale * saturationReduction + r * (1 - saturationReduction);
            g = grayscale * saturationReduction + g * (1 - saturationReduction);
            b = grayscale * saturationReduction + b * (1 - saturationReduction);
        }
        // r, g, b are now desaturated, still approximately in [0,255]

        // 2. Contrast Adjustment
        // factor > 0. 1.0 means no change. >1 increases contrast, <1 decreases.
        if (contrastFactor > 0 && contrastFactor !== 1.0) {
            r = ((r / 255 - 0.5) * contrastFactor + 0.5) * 255;
            g = ((g / 255 - 0.5) * contrastFactor + 0.5) * 255;
            b = ((b / 255 - 0.5) * contrastFactor + 0.5) * 255;
        }
        // Clamp after contrast as values can go out of [0,255]
        r = clamp(r);
        g = clamp(g);
        b = clamp(b);

        // 3. Color Tint
        // strength between 0 (no tint) and 1 (full tint color).
        if (tintStrength > 0 && tintStrength <= 1) {
            r = r * (1 - tintStrength) + tintR_param * tintStrength;
            g = g * (1 - tintStrength) + tintG_param * tintStrength;
            b = b * (1 - tintStrength) + tintB_param * tintStrength;
        }
        // Clamp after tint
        r = clamp(r);
        g = clamp(g);
        b = clamp(b);

        // 4. Grain
        // amount is the max deviation for pixel component values.
        if (grainAmount > 0) {
            // Generate a single noise value for a monochromatic grain effect
            const grainOffset = (Math.random() * 2 - 1) * grainAmount; // Range: [-grainAmount, +grainAmount]
            r += grainOffset;
            g += grainOffset;
            b += grainOffset;
        }

        // Final Clamp for all operations (mainly for grain, but also catches any intermediate oversight)
        data[i] = clamp(r);
        data[i + 1] = clamp(g);
        data[i + 2] = clamp(b);
        // Alpha channel (data[i+3]) remains unchanged
    }

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

    return canvas;
}