Image Hoya R72 Infrared Filter Effect Tool

async function processImage(originalImg, foliageSensitivity = 1.5, skyDarkeningFactor = 0.3, redChannelFactor = 0.8) {
    const canvas = document.createElement('canvas');
    
    // Ensure the image is loaded before trying to get its dimensions or draw it.
    // An Image object might be passed before its 'src' has fully loaded.
    if (!originalImg.complete || originalImg.naturalWidth === 0) {
        // Image is not loaded yet, create a promise that resolves when it loads
        await new Promise((resolve, reject) => {
            originalImg.onload = () => resolve();
            originalImg.onerror = (err) => reject(new Error("Failed to load image: " + err));
            // If src is set but not complete, onload should fire.
            // If src is not set, this won't resolve unless src is set later elsewhere.
            // However, if originalImg.src is already set and loading, this setup is fine.
        });
    }

    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        // This can happen due to CORS issues if the image is from another domain and canvas becomes tainted
        console.error("Error getting ImageData:", e);
        // As a fallback, return a canvas with an error message or the original image
        // For this problem, we might just let the error propagate or return an empty/error canvas.
        // Returning the original image canvas if processing fails:
        // Create a new canvas and draw the original image to avoid returning the potentially tainted one.
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = originalImg.naturalWidth;
        errorCanvas.height = originalImg.naturalHeight;
        const errorCtx = errorCanvas.getContext('2d');
        errorCtx.drawImage(originalImg, 0, 0);
        // Optionally draw an error message on top
        errorCtx.font = "16px Arial";
        errorCtx.fillStyle = "red";
        errorCtx.fillText("Error processing image (CORS issue?).", 10, 20);
        return errorCanvas;
    }
    
    const data = imageData.data;

    // Determine green channel weight for 'other' areas. Blue is fixed small weight.
    // Ensure generalGreenChannelFactor is not negative if redChannelFactor > 1.0
    const generalGreenChannelFactor = Math.max(0, 1.0 - redChannelFactor); 
    const generalBlueChannelFactor = 0.05; // Small fixed blue contribution for 'other' areas

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];

        let gray;

        // Foliage detection: Green is dominant and reasonably bright.
        // (g > (r+b)/2) means g is greater than the average of r and b.
        // The "+20" provides a threshold for "significantly greener".
        // g > 60 avoids processing very dark green areas as bright foliage.
        if (g > (r + b) / 2 + 20 && g > 60) { 
            // Calculate a base luminance heavily weighted towards green, then scale by sensitivity.
            let foliageLuminance = (0.1 * r + 0.8 * g + 0.1 * b); // Green-heavy mix
            gray = foliageLuminance * foliageSensitivity;
        }
        // Sky detection: Blue is dominant and reasonably bright.
        // Similar logic: "+30" for blue dominance, ">70" for minimum brightness.
        else if (b > (r + g) / 2 + 30 && b > 70) { 
            // Calculate standard luminance, then scale it down by the darkening factor.
            let originalLuminance = (0.299 * r + 0.587 * g + 0.114 * b); // Standard NTSC luminance
            gray = originalLuminance * skyDarkeningFactor;
        }
        // Other areas: B&W conversion based primarily on red channel, 
        // with customizable green contribution and minor blue.
        else {
            gray = (r * redChannelFactor + 
                    g * generalGreenChannelFactor + 
                    b * generalBlueChannelFactor);
        }

        // Clamp the calculated gray value to the 0-255 range.
        gray = Math.max(0, Math.min(255, Math.round(gray)));

        data[i] = gray;     // Set red channel
        data[i + 1] = gray; // Set green channel
        data[i + 2] = gray; // Set blue channel
        // data[i+3] (alpha) remains unchanged
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}