Image Bergger Pancro 400 Film Filter Effect Tool

function processImage(originalImg, contrast = 1.8, grainAmount = 25, brightness = 0) {
    const canvas = document.createElement('canvas');
    let canvasWidth = originalImg.naturalWidth || originalImg.width;
    let canvasHeight = originalImg.naturalHeight || originalImg.height;

    // Handle case of invalid image dimensions (e.g., image not loaded yet or broken)
    if (canvasWidth <= 0 || canvasHeight <= 0) {
        console.warn("Original image has invalid dimensions (e.g., 0 or negative). Processing a 1x1 pixel canvas instead.");
        canvasWidth = 1; // Fallback to 1x1 to prevent errors with 0-size canvas operations
        canvasHeight = 1;
    }

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

    // Ensure parameters are numbers, falling back to provided defaults if parsing fails
    // String(param) is to robustly handle if param is undefined, null, or already a string or number.
    const finalContrast = isNaN(parseFloat(String(contrast))) ? 1.8 : parseFloat(String(contrast));
    const finalGrainAmount = isNaN(parseFloat(String(grainAmount))) ? 25 : parseFloat(String(grainAmount));
    const finalBrightness = isNaN(parseFloat(String(brightness))) ? 0 : parseFloat(String(brightness));

    const ctx = canvas.getContext('2d', { 
        willReadFrequently: true // Optional hint for performance optimization by the browser
    });

    if (!ctx) {
        console.error("Could not get 2D rendering context. Returning an empty canvas with original dimensions.");
        // Canvas is already created with the correct dimensions (or 1x1 fallback).
        return canvas;
    }

    try {
        ctx.drawImage(originalImg, 0, 0, canvasWidth, canvasHeight);
    } catch (e) {
        console.error("Error drawing the original image onto the canvas:", e);
        // This can happen if originalImg is invalid or not fully loaded.
        // The canvas will be blank or partially drawn. Return it as is.
        return canvas;
    }

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
    } catch (e) {
        console.error("Error getting image data from canvas. This often indicates a CORS issue if the image is from a different origin or the canvas has been tainted:", e);
        // If getImageData fails, the canvas currently holds the original image (if drawImage succeeded).
        // We return the canvas as is, displaying the original image without the filter.
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray

    for (let i = 0; i < data.length; i += 4) {
        // Get RGB values for the current pixel
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha value data[i+3] is preserved

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

        // Step 2: Adjust contrast and brightness
        // The formula C * (Value - 128) + 128 increases contrast about the midpoint (128).
        // Brightness is then added.
        gray = finalContrast * (gray - 128) + 128 + finalBrightness;

        // Step 3: Add film grain
        // Generate random noise. finalGrainAmount controls the intensity.
        // (Math.random() - 0.5) creates a value between -0.5 and 0.5.
        const grain = (Math.random() - 0.5) * finalGrainAmount;
        gray += grain;

        // Step 4: Clamp and round the resulting grayscale value
        // Pixel values must be integers between 0 and 255.
        gray = Math.max(0, Math.min(255, Math.round(gray)));

        // Set the new RGB values (all to the same 'gray' value for B&W)
        data[i] = gray;
        data[i + 1] = gray;
        data[i + 2] = gray;
    }

    // Write the modified pixel data back to the canvas
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}