Image Infrared 850nm Filter Effect Tool

async function processImage(originalImg, rCoeff = 0.2, gCoeff = 1.2, bCoeff = -0.4) {
    const canvas = document.createElement('canvas');
    
    // Ensure the image is fully loaded to get correct dimensions
    // This might not be strictly necessary if originalImg is guaranteed to be loaded,
    // but it's a good practice.
    if (!originalImg.complete || originalImg.naturalWidth === 0) {
        // Wait for the image to load if it's not already
        // This part assumes originalImg is an HTMLImageElement that might still be loading.
        // If originalImg comes from another source (e.g. another canvas), this await might not be needed
        // or might need different handling depending on how originalImg is obtained.
        await new Promise((resolve, reject) => {
            originalImg.onload = resolve;
            originalImg.onerror = () => {
                console.error("Image failed to load.");
                // Set canvas to a minimal size if image fails to load
                canvas.width = 1;
                canvas.height = 1;
                reject(new Error("Image load error"));
            };
            // If src is already set and it failed, onerror might have already fired.
            // If src is not set, this won't trigger loading.
            // This assumes src is set and loading, or already loaded.
        }).catch(e => {
            // If image loading fails, we can'g proceed with processing.
            // Return the (possibly tiny) canvas.
             return canvas;
        });
    }

    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    if (width === 0 || height === 0) {
        console.error("Image has zero dimensions even after attempting to load.");
        canvas.width = 1; 
        canvas.height = 1;
        return canvas; 
    }

    canvas.width = width;
    canvas.height = height;
    
    const ctx = canvas.getContext('2d');
    if (!ctx) {
        console.error("Could not get 2D rendering context.");
        // Return an empty canvas if context cannot be obtained
        return canvas; 
    }

    try {
        // Draw the original image onto the canvas
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error drawing image to canvas:", e);
        // This can happen if originalImg is not a valid image source
        // Return the canvas, which might be blank or partially drawn
        return canvas;
    }


    let imageData;
    try {
        // Get the image data from the canvas
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This error typically occurs if the image is cross-origin and the canvas becomes tainted.
        console.error("Could not get image data (possibly due to CORS policy):", e);
        // One strategy is to return the canvas with the original image drawn,
        // as processing is not possible.
        // Or, if the environment allows, one might try to re-fetch the image with crossOrigin="anonymous".
        // For this function, we'll return the canvas as-is.
        return canvas; 
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray

    // The parameters rCoeff, gCoeff, bCoeff define the specific "850nm" look.
    // These defaults are chosen to simulate the common characteristics of 850nm IR photography:
    // - Green foliage becomes very bright (Wood Effect).
    // - Blue skies and water become very dark.
    // - The image is monochrome.

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];     // Red channel
        const g = data[i + 1]; // Green channel
        const b = data[i + 2]; // Blue channel
        // data[i + 3] is the Alpha channel, we'll leave it unchanged.

        // Calculate the monochrome infrared intensity based on the coefficients
        let irIntensity = (r * rCoeff) + (g * gCoeff) + (b * bCoeff);

        // Clamp the intensity value to the valid 0-255 range
        irIntensity = Math.max(0, Math.min(255, irIntensity));
        
        // Apply the new intensity to the R, G, and B channels
        data[i] = irIntensity;     // New Red
        data[i + 1] = irIntensity; // New Green
        data[i + 2] = irIntensity; // New Blue
    }

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

    return canvas;
}