Image Kodak Tri-X Filter Effect Tool

function processImage(originalImg, contrast = 1.5, grainAmount = 15) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure we use the intrinsic dimensions of the image
    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 the image data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray

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

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

        // 2. Adjust contrast
        // The formula scales the difference from the midpoint (127.5)
        // ((value/255 - 0.5) * factor + 0.5) * 255
        if (contrast !== 1) { // No adjustment if contrast is 1
            gray = (((gray / 255.0) - 0.5) * contrast + 0.5) * 255.0;
        }
        
        // Clamp gray value to [0, 255] after contrast adjustment
        gray = Math.max(0, Math.min(255, gray));

        // 3. Add film grain
        if (grainAmount > 0) {
            // Generate random noise between -grainAmount and +grainAmount
            const noise = (Math.random() * 2 - 1) * grainAmount;
            gray += noise;
        }

        // Clamp final value to [0, 255]
        const finalValue = Math.max(0, Math.min(255, Math.round(gray)));

        data[i] = finalValue;     // Red
        data[i + 1] = finalValue; // Green
        data[i + 2] = finalValue; // Blue
        // data[i + 3] remains unchanged (alpha)
    }

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

    return canvas;
}