Image AGFA APX 100 Film Filter Effect Tool

function processImage(originalImg, contrast = 1.3, brightness = 0, grainAmount = 10) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Determine image dimensions. Use naturalWidth/Height for intrinsic dimensions if available (HTMLImageElement),
    // otherwise fallback to width/height (e.g., if originalImg is another canvas).
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Check for valid image dimensions
    if (imgWidth === 0 || imgHeight === 0) {
        console.error("Image has zero dimensions or is not loaded properly. Cannot process.");
        // Return a minimal canvas or handle error as appropriate for the context.
        // For now, create a 1x1 canvas to avoid further errors down the line.
        canvas.width = 1;
        canvas.height = 1;
        ctx.fillStyle = 'red'; // Indicate error
        ctx.fillRect(0,0,1,1);
        return canvas;
    }

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

    // Draw the original image onto the canvas
    try {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error drawing image to canvas:", e);
        // If drawing fails, return the canvas, which might be blank or partially drawn.
        // Consider filling with an error color or pattern if required.
        return canvas;
    }

    // Get the pixel data from the canvas.
    // This can throw a security error if the image is cross-origin and the canvas becomes "tainted".
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error getting ImageData, possibly due to CORS policy with a cross-origin image:", e);
        // Cannot process pixels if ImageData cannot be retrieved.
        // Return the canvas with the original image drawn (if drawing was successful).
        // The user will see the original image if CORS prevents pixel manipulation.
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray: [R, G, B, A, 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 (Luminosity method)
        // This formula approximates human perception of brightness.
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // 2. Adjust Contrast
        // The formula C' = (C - M) * factor + M adjusts contrast.
        // M is the midpoint of the color range (128 for 0-255).
        // 'contrast' parameter acts as the factor. >1 increases contrast, <1 decreases.
        gray = (gray - 128) * contrast + 128;
        
        // 3. Adjust Brightness
        // Adds the 'brightness' value to the pixel. Positive values lighten, negative darken.
        gray += brightness;
        
        // 4. Add Film Grain
        if (grainAmount > 0) {
            // Generate a random noise value between -grainAmount and +grainAmount.
            const grainEffect = (Math.random() * 2 - 1) * grainAmount;
            gray += grainEffect;
        }

        // 5. Clamp values to the valid 0-255 range
        gray = Math.max(0, Math.min(255, gray));

        // Apply the new grayscale value to R, G, and B channels
        data[i] = gray;
        data[i + 1] = gray;
        data[i + 2] = gray;
    }

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

    return canvas;
}