Image ORWO UN54 Motion Picture Film Effect Applicator

async function processImage(originalImg, contrastFactor = 1.3, grainStrength = 15, exposureOffset = 0.0) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Determine canvas dimensions from the image
    const canvasWidth = originalImg.naturalWidth || originalImg.width;
    const canvasHeight = originalImg.naturalHeight || originalImg.height;

    // Handle cases where the image might have zero dimensions
    if (canvasWidth === 0 || canvasHeight === 0) {
        console.warn("Input image has zero width or height.");
        canvas.width = 0;
        canvas.height = 0;
        return canvas; // Return an empty canvas
    }

    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    try {
        // Draw the original image onto the canvas
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error drawing image to canvas. Ensure the image is loaded and valid.", e);
        // Return the (potentially empty) canvas if drawing fails
        return canvas;
    }

    let imageData;
    try {
        // Get the image data from the canvas. This can fail due to security restrictions
        // (e.g., tainted canvas from cross-origin image without CORS).
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error getting ImageData from canvas. This may be due to cross-origin restrictions.", e);
        // If getImageData fails, return the canvas with the original image drawn (if successful)
        // or an empty canvas if drawing also failed.
        return canvas;
    }
    
    const data = imageData.data; // data is a Uint8ClampedArray

    // Iterate over each pixel (represented by 4 values: R, G, B, A)
    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 (Luminance method)
        // ORWO UN54 is a black and white film stock.
        const grayLuminance = 0.299 * r + 0.587 * g + 0.114 * b; // Value in 0-255 range

        // 2. Apply exposure offset
        // First, normalize luminance to 0-1 range
        let normalizedGray = grayLuminance / 255.0;
        
        // Apply exposure offset. A positive offset brightens, negative darkens.
        // exposureOffset is typically a small fractional value, e.g., -0.2 (darker) to 0.2 (brighter).
        normalizedGray += exposureOffset;

        // 3. Apply contrast
        // The contrast formula (value - 0.5) * factor + 0.5 centers changes around mid-gray (0.5).
        // This operates on the 0-1 normalized gray value.
        let contrastedGray = (normalizedGray - 0.5) * contrastFactor + 0.5;

        // Convert contrasted gray back to 0-255 scale
        let finalGray = contrastedGray * 255.0;
        
        // 4. Add film grain
        if (grainStrength > 0) {
            // Generate random noise. (Math.random() - 0.5) results in a range from -0.5 to 0.5.
            // Multiply by grainStrength to control the intensity of the grain.
            const noise = (Math.random() - 0.5) * grainStrength;
            finalGray += noise;
        }
        
        // Clamp final gray value to 0-255 and round to nearest integer.
        // Clamping is done first, then rounding, to ensure the rounded value stays within 0-255.
        finalGray = Math.round(Math.max(0, Math.min(255, finalGray)));

        // Update pixel data for R, G, B channels to the new gray value
        data[i] = finalGray;
        data[i+1] = finalGray;
        data[i+2] = finalGray;
    }

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

    // Return the canvas element with the processed image
    return canvas;
}