Photo Infrared Filter Application

function processImage(originalImg, blueChannelMultiplier = 0.3) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true }); // Added willReadFrequently for potential performance hint

    // Ensure the original image is loaded, otherwise dimensions might be 0
    if (!originalImg.complete || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        // Optionally, handle this error case: e.g., return an empty canvas or throw an error
        // For now, we'll proceed, but it might result in a 0x0 canvas if image isn't loaded
        console.error("Image not fully loaded or has zero dimensions.");
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // Handle potential security errors if the image is cross-origin and taints the canvas
        console.error("Could not get ImageData: ", e);
        // As a fallback, we could return the original image drawn on a canvas,
        // or a message, or an empty canvas. For now, return the (tainted) canvas.
        // Note: If tainted, putImageData will also fail.
        // A robust solution for tainted canvases would require server-side processing or CORS headers.
        // For this exercise, assume the image is usable.
        return canvas; // Or throw the error
    }
    
    const data = imageData.data;

    // Sanitize blueChannelMultiplier: ensure it's a number between 0 and 1
    let factor = parseFloat(blueChannelMultiplier);
    if (isNaN(factor)) {
        factor = 0.3; // Default if input was not a valid number string
    }
    factor = Math.max(0, Math.min(1, factor));

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];      // Original Red
        const g = data[i+1];    // Original Green
        const b = data[i+2];    // Original Blue
        // Alpha channel data[i+3] is left unchanged

        // Apply a common false-color infrared simulation (similar to Kodak Aerochrome film):
        // - Foliage (typically green) should appear red.
        // - Red objects should appear green.
        // - Blue channel (sky, water) is often suppressed or darkened.

        data[i]   = g;            // New Red channel takes original Green
        data[i+1] = r;            // New Green channel takes original Red
        data[i+2] = b * factor;   // New Blue channel is original Blue, scaled by the multiplier
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}