Image Ilford FP4 Plus Filter Effect Tool

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Handle cases where the image might not have valid dimensions
    if (width === 0 || height === 0) {
        canvas.width = 0;
        canvas.height = 0;
        // Optional: log a warning, but the main thing is to return a 0x0 canvas.
        // console.warn("Original image has zero width or height.");
        return canvas;
    }

    canvas.width = width;
    canvas.height = height;
    
    const ctx = canvas.getContext('2d');

    if (!ctx) {
        // This is highly unlikely for '2d' contexts in modern browsers
        // Fallback: return an empty canvas, or could throw.
        // console.error("Failed to get 2D context from canvas.");
        return canvas; // Return the empty, unconfigured canvas
    }

    // Draw the original image onto the canvas
    try {
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This might happen if originalImg is not a valid image source (e.g., not loaded, tainted)
        // console.error("Error drawing image to canvas:", e);
        // Return a canvas with an error message or just an empty canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
        ctx.font = "16px Arial";
        ctx.fillStyle = "red";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText("Error: Could not load image.", canvas.width / 2, canvas.height / 2);
        return canvas;
    }

    // Get image data. This can throw a SecurityError if the image is cross-origin and not CORS-enabled.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // console.error("Error getting image data (likely a CORS issue):", e);
        // Return a canvas with an error message explaining the likely CORS issue.
        // The original image is on the canvas, but we can't process it.
        // Clear it and show an error message.
        ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas
        ctx.font = "14px Arial";
        ctx.fillStyle = "red";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        let msgLine1 = "Error: Could not process image.";
        let msgLine2 = "This might be due to cross-origin restrictions (CORS).";
        if (canvas.height < 40) { // If canvas too small, just one line
             ctx.fillText(msgLine1, canvas.width / 2, canvas.height / 2);
        } else {
            ctx.fillText(msgLine1, canvas.width / 2, canvas.height / 2 - 10);
            ctx.fillText(msgLine2, canvas.width / 2, canvas.height / 2 + 10);
        }
        return canvas;
    }
    
    const data = imageData.data;

    // Constants chosen to simulate Ilford FP4 Plus characteristics:
    // Fine grain, good sharpness (acutance), and wide tonal range with decent contrast.
    const contrastFactor = 1.15; // Provides a modest contrast boost, typical for FP4's "punch".
    const brightnessAdjust = -5;  // Slightly darkens the image, enhancing blacks, common in B&W printing.
    const grainStrength = 8;      // Simulates fine grain; FP4 Plus is known for its fine grain structure.

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i+1];
        const b = data[i+2];

        // Convert to grayscale using Rec.709 luma coefficients for perceptually accurate brightness.
        let lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;

        // Apply contrast adjustment.
        // This formula scales the tonal range around the mid-point (128).
        lum = (lum - 128) * contrastFactor + 128;

        // Apply brightness adjustment.
        lum += brightnessAdjust;

        // Add fine grain.
        if (grainStrength > 0) {
            // Generate random noise between -grainStrength/2 and +grainStrength/2.
            const noise = (Math.random() - 0.5) * grainStrength;
            lum += noise;
        }

        // Clamp the luminosity value to ensure it remains within the valid [0, 255] range.
        lum = Math.max(0, Math.min(255, lum));

        // Apply the new grayscale value to R, G, and B channels.
        // Alpha channel (data[i+3]) is preserved.
        data[i] = lum;
        data[i+1] = lum;
        data[i+2] = lum;
    }

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

    return canvas;
}