Image TMax 400 Filter Effect Tool

/**
 * Applies a TMax 400-like filter effect to an image.
 * This involves converting to grayscale, increasing contrast, and adding fine grain.
 * TMax 400 is a black and white film known for its fine grain and high contrast.
 *
 * @param {Image} originalImg The original image object (e.g., an HTMLImageElement that has finished loading).
 * @param {number} [contrast=1.8] The amount of contrast to apply. 
 *                                  1.0 means no change. 
 *                                  Values greater than 1.0 increase contrast.
 *                                  Values less than 1.0 decrease contrast.
 * @param {number} [grainStrength=10] The intensity of the film grain effect. 
 *                                     0 means no grain. 
 *                                     Higher values mean more pronounced grain.
 *                                     Typical values for fine grain are between 5 and 15.
 * @returns {HTMLCanvasElement} A new canvas element with the TMax 400 filter effect applied.
 */
function processImage(originalImg, contrast = 1.8, grainStrength = 10) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // willReadFrequently for performance with getImageData/putImageData

    // Ensure originalImg dimensions are available
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    // 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];
        // Alpha channel (data[i + 3]) is preserved

        // 1. Convert to grayscale using the luminance method (standard weights)
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // 2. Apply contrast adjustment
        // The formula scales values relative to the midpoint (128 or 0.5 normalized)
        // C_out_norm = (C_in_norm - 0.5) * contrast_factor + 0.5
        // Then scale back to 0-255 range
        let contrastedGray = (gray / 255 - 0.5) * contrast + 0.5;
        contrastedGray = contrastedGray * 255;

        // Clamp the contrasted gray value to ensure it's within [0, 255]
        contrastedGray = Math.max(0, Math.min(255, contrastedGray));

        // 3. Add film grain
        // Generate a random noise value and add it to the grayscale pixel
        // Noise is centered around 0, with spread determined by grainStrength
        const noise = (Math.random() - 0.5) * grainStrength;
        let finalValue = contrastedGray + noise;

        // Clamp the final pixel value to ensure it's within [0, 255]
        finalValue = Math.max(0, Math.min(255, Math.round(finalValue))); // Rounding to nearest integer for pixel value

        // Set the R, G, B channels to the new grayscale value
        data[i] = finalValue;     // Red
        data[i + 1] = finalValue; // Green
        data[i + 2] = finalValue; // Blue
    }

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

    return canvas;
}