Photo Infrared 720nm Filter Effect Tool

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Use naturalWidth/Height for the intrinsic dimensions of the image,
    // fallback to width/height if naturalWidth/Height are not available (e.g. for a canvas source).
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    if (width === 0 || height === 0) {
        // This can happen if the image isn't loaded yet or is an empty image.
        // Return a small, empty canvas or throw an error.
        console.warn("Original image has zero width or height. Returning an empty 1x1 canvas.");
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

    canvas.width = width;
    canvas.height = height;

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

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data; // data is a Uint8ClampedArray: R, G, B, A, R, G, B, A, ...

    // Apply the Infrared 720nm filter effect
    // This filter primarily passes deep red and near-infrared (NIR) light.
    // In a standard digital camera, the red channel sensor pixels are most sensitive
    // to red light and also to any NIR light that leaks through the camera's IR-cut filter.
    // So, we'll use the original red channel's value as the primary basis for the filtered image's intensity.
    // The resulting image is often monochrome or has a characteristic reddish/brownish tint.

    for (let i = 0; i < data.length; i += 4) {
        const r_original = data[i]; // Original Red value
        // const g_original = data[i + 1]; // Original Green value (not directly used for intensity in this model)
        // const b_original = data[i + 2]; // Original Blue value (not directly used for intensity in this model)
        // const a_original = data[i + 3]; // Original Alpha value

        // The "intensity" of light passing the 720nm filter is approximated by the red channel.
        const intensity = r_original;

        // Set the new RGB values for the pixel.
        // The output red channel directly uses this intensity.
        // The output green and blue channels are scaled versions of this intensity
        // to produce a desaturated reddish-brown tint.
        // Values are automatically clamped to the 0-255 range by the Uint8ClampedArray.
        data[i]     = intensity;          // New Red
        data[i + 1] = intensity * 0.7;    // New Green (creates a less saturated red, shifting towards orange/brown)
        data[i + 2] = intensity * 0.5;    // New Blue (further enhances the reddish-brown tint)
        // data[i + 3] (alpha) remains unchanged.
    }

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

    return canvas;
}