Please bookmark this page to avoid losing your image tool!

Image Infrared Filter Application

(Free & Supports Bulk Upload)

The result will appear here...

JavaScript Code (For Advanced Users)

You can edit the below JavaScript code to customize the image tool.

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for images that might not have explicit width/height
    // attributes set if they are not yet in the DOM, or to get intrinsic dimensions.
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

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

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

    // If the image has no dimensions, return the empty canvas
    if (width === 0 || height === 0) {
        return canvas;
    }

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

    // Iterate over each pixel (each pixel has 4 components: 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
        // Alpha (data[i+3]) is preserved

        // Apply a common pseudo infrared filter effect:
        // - Red channel becomes the original Green channel (makes foliage red)
        // - Green channel becomes the original Red channel
        // - Blue channel is reduced (darkens skies and blue elements)
        data[i] = g;              // New Red = Original Green
        data[i + 1] = r;          // New Green = Original Red
        data[i + 2] = b * 0.5;    // New Blue = Original Blue * 0.5
                                  // (Uint8ClampedArray handles truncation and clamping to 0-255)
    }

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

    return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Create a custom image tool

Description

The Image Infrared Filter Application allows users to apply a simulated infrared filter effect to their images. By transforming the color channels of the image, this tool enhances the appearance of foliage by making it appear red and reduces the visibility of blue elements, resulting in a striking contrast. This tool is useful for photographers and graphic designers looking to create artistic effects, as well as for educational purposes in demonstrating how infrared photography alters color perception in landscapes.

JavaScript Code (For Advanced Users)

Free Image Tool Creator

Description

Leave a Reply Cancel reply

Other Image Tools: