Image Infrared Filter Effect Application

function processImage(originalImg, blueChannelMultiplier = 0.5) {
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can be a performance hint for contexts
    // where getImageData is used, though for a single pass, impact may vary.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

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

    // Handle cases where image dimensions might be invalid or image not loaded
    if (!imgWidth || imgWidth <= 0 || !imgHeight || imgHeight <= 0) {
        // Return a minimal 1x1 canvas if dimensions are invalid to prevent errors.
        // The consuming application might want more sophisticated error handling.
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

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

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

    // Validate and prepare the blueChannelMultiplier
    let multiplier = parseFloat(blueChannelMultiplier);
    // If parsing fails (e.g., input was a non-numeric string) or if multiplier is negative,
    // fall back to the default value of 0.5.
    if (isNaN(multiplier) || multiplier < 0) {
        multiplier = 0.5;
    }

    // Get image data to manipulate pixels
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray

    // Iterate over each pixel (each pixel consists of 4 values: R, G, B, A)
    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
        // data[i + 3] is Alpha, which we'll leave unchanged

        // Apply a common false-color infrared (CIR) simulation:
        // - Near-Infrared (NIR) is typically mapped to the Red channel in CIR images.
        //   Since we don't have actual NIR data, the Green channel of a visible light
        //   image is often used as a proxy because healthy vegetation reflects
        //   both green and NIR light strongly.
        // - The Red channel from the visible light image is mapped to the Green channel.
        // - The Green channel from the visible light image is mapped to the Blue channel,
        //   OR the original Blue channel is used, often scaled.
        // Here, we'll use: R' = G, G' = R, B' = B * multiplier
        // This makes green vegetation appear red, red objects appear green,
        // and blue skies appear scaled in intensity (darker if multiplier < 1).

        const newR = g;                    // Green channel becomes the new Red
        const newG = r;                    // Red channel becomes the new Green
        const newB = b * multiplier;       // Blue channel is scaled

        // Assign the new RGB values, clamping them to the valid 0-255 range
        data[i] = Math.max(0, Math.min(255, newR));
        data[i + 1] = Math.max(0, Math.min(255, newG));
        data[i + 2] = Math.max(0, Math.min(255, newB));
        // Alpha (data[i + 3]) remains unchanged
    }

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

    return canvas;
}