Image ORWO NP22 Film Filter Effect Application

function processImage(originalImg, contrast = 1.8, grainIntensity = 20) {
    // Ensure parameters are valid numbers, using defaults if not.
    let numContrast = Number(contrast);
    if (isNaN(numContrast) || numContrast < 0) {
        console.warn(`Invalid contrast value "${contrast}". Using default 1.8.`);
        numContrast = 1.8;
    }

    let numGrainIntensity = Number(grainIntensity);
    if (isNaN(numGrainIntensity) || numGrainIntensity < 0) {
        console.warn(`Invalid grainIntensity value "${grainIntensity}". Using default 20.`);
        numGrainIntensity = 20;
    }

    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get image dimensions. HTMLImageElement properties.
    // Use naturalWidth/Height for actual image dimensions, not styled dimensions.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Set canvas dimensions
    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Handle cases where image dimensions are not available (e.g., image not loaded yet)
    if (imgWidth === 0 || imgHeight === 0) {
        console.error("Image dimensions are 0. Ensure the image is fully loaded before processing.");
        // Draw a placeholder or return an empty canvas
        ctx.fillStyle = 'rgba(128,128,128,0.5)';
        ctx.fillRect(0,0,canvas.width,canvas.height); // will be 0x0 if dimensions are 0
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        if (canvas.width > 0 && canvas.height > 0) { // Only draw text if theres space
             ctx.fillText('Error: Image not loaded.', canvas.width/2, canvas.height/2);
        }
        return canvas; // Returns a 0x0 canvas if image has no dimensions
    }

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

    // Get the image data from the canvas
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Could not get image data. This might be due to cross-origin image restrictions.", e);
        // Draw an error message on the canvas
        ctx.fillStyle = 'rgba(200, 0, 0, 0.7)'; // Semi-transparent red
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'white';
        ctx.textAlign = 'center';
        ctx.font = `bold ${Math.min(24, canvas.width / 20)}px Arial`;
        ctx.fillText('Error processing image.', canvas.width / 2, canvas.height / 2 - 20);
        ctx.font = `${Math.min(16, canvas.width / 25)}px Arial`;
        ctx.fillText('Possibly a cross-origin issue.', canvas.width / 2, canvas.height / 2 + 10);
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray

    // Process each pixel
    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)
        let gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // 2. Apply contrast
        // Formula: NewValue = factor * (OldValue - 128) + 128
        gray = numContrast * (gray - 128) + 128;

        // 3. Add film grain
        // Generates a random value between -numGrainIntensity/2 and +numGrainIntensity/2
        const grain = (Math.random() - 0.5) * numGrainIntensity;
        let finalValue = gray + grain;

        // 4. Clamp the value to the 0-255 range
        finalValue = Math.max(0, Math.min(255, finalValue));
        
        // Set the new RGB values (all same for monochrome)
        data[i] = finalValue;
        data[i+1] = finalValue;
        data[i+2] = finalValue;
    }

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

    // Return the canvas with the applied effect
    return canvas;
}