Image Infrared Landscape Filter

/**
 * Applies an Infrared Landscape Filter effect to an image.
 * This effect simulates a type of false-color infrared photography,
 * where foliage typically appears in shades of red or magenta,
 * skies and water take on blue or cyan hues, and other colors are shifted.
 *
 * The transformation uses a channel swapping technique:
 * - The new Red channel is derived from the original Green channel.
 * - The new Green channel is derived from the original Blue channel.
 * - The new Blue channel is derived from the original Red channel.
 * So, for a pixel (R_orig, G_orig, B_orig), the new pixel will be (G_orig, B_orig, R_orig).
 *
 * @param {Image} originalImg The original image object to process.
 * @returns {HTMLCanvasElement} A canvas element displaying the image with the infrared filter applied.
 */
function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Draw the original image onto the canvas
    // This is necessary to access its pixel data
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Get the pixel data from the canvas
    // ImageData is a flat array of R,G,B,A values for each pixel
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data; // This is a Uint8ClampedArray

    // Iterate over each pixel in the image data.
    // Each pixel consists of 4 components (Red, Green, Blue, Alpha),
    // so we increment by 4 in each step.
    for (let i = 0; i < data.length; i += 4) {
        const r_orig = data[i];     // Original Red value
        const g_orig = data[i + 1]; // Original Green value
        const b_orig = data[i + 2]; // Original Blue value
        // data[i + 3] is the Alpha channel, which we'll leave unchanged.

        // Apply the channel swapping for the infrared effect:
        // New Red   <- Original Green
        // New Green <- Original Blue
        // New Blue  <- Original Red
        data[i]     = g_orig; // Set the new Red component
        data[i + 1] = b_orig; // Set the new Green component
        data[i + 2] = r_orig; // Set the new Blue component
    }

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

    // Return the canvas element with the processed image
    return canvas;
}