Image TMax 100 Filter Effect Application

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    
    // Ensure the original image has loaded and has valid dimensions
    if (!originalImg.naturalWidth || !originalImg.naturalHeight) {
        // If the image is not loaded or dimensions are zero,
        // return a small, empty canvas to avoid errors.
        // The caller should ensure the image is loaded before calling processImage.
        console.warn("Original image is not fully loaded or has zero dimensions. Returning 1x1 canvas.");
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    
    const ctx = canvas.getContext('2d');
    if (!ctx) {
        // This should ideally not happen in modern browsers
        console.error("Canvas 2D context is not supported.");
        // Fallback: return an empty canvas or throw an error.
        // For this exercise, returning the empty canvas.
        return canvas;
    }

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

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This can happen if the image is from a different origin and the canvas becomes tainted (CORS issue)
        console.error("Could not get image data from canvas. This might be due to cross-origin restrictions.", e);
        // In this case, we return the canvas with the original image drawn, without the filter effect.
        return canvas;
    }
    
    const data = imageData.data;

    // Define the contrast factor for the TMax 100 effect.
    // Kodak TMax 100 is a black and white film known for its very fine grain,
    // high sharpness, and ability to produce images with rich tonality and good contrast.
    // A contrast factor of 1.0 means no change. Values > 1.0 increase contrast.
    // A value around 1.2-1.4 can give a "punchy" black and white look.
    const contrastFactor = 1.3; 

    // Iterate over each pixel in the image data array
    // Each pixel is represented by 4 consecutive values: R, G, B, A
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];     // Red channel
        const g = data[i + 1]; // Green channel
        const b = data[i + 2]; // Blue channel
        // Alpha channel (data[i + 3]) will be preserved

        // Convert the pixel to grayscale using the luminance method.
        // This formula is derived from relative perceived brightness of colors by human eye.
        // (Coefficients for NTSC standard, widely used in image processing)
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // Apply contrast adjustment.
        // The formula ((Value - MidPoint) * Factor) + MidPoint adjusts the intensity
        // of a pixel relative to the mid-gray value (128 for a 0-255 range).
        // This pushes values darker than mid-gray further towards black,
        // and values lighter than mid-gray further towards white, thus increasing contrast.
        gray = (gray - 128) * contrastFactor + 128;

        // Clamp the resulting gray value to the valid 0-255 range.
        // This prevents color values from going out of bounds due to the contrast adjustment.
        gray = Math.max(0, Math.min(255, gray));
        
        // Set the R, G, and B channels of the pixel to the new gray value.
        data[i] = gray;
        data[i + 1] = gray;
        data[i + 2] = gray;
        // Alpha channel (data[i + 3]) remains unchanged to preserve transparency.
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);
    
    // Return the canvas element with the TMax 100 effect applied
    return canvas;
}