Image False Color Filter

function processImage(originalImg, lowIntensityColor = "#0000FF", midIntensityColor = "#00FF00", highIntensityColor = "#FF0000", threshold1 = 85, threshold2 = 170) {

    // Helper function to parse color strings (hex, rgb, named colors) into RGB objects
    function parseColor(colorStr) {
        // Create a temporary 1x1 canvas to let the browser parse the color
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = 1;
        tempCanvas.height = 1;
        const tempCtx = tempCanvas.getContext('2d');
        
        if (!tempCtx) {
            // This should ideally not happen in modern browsers
            console.error("Could not get 2D context for color parsing. Defaulting to black.");
            return { r: 0, g: 0, b: 0 };
        }
        
        tempCtx.fillStyle = colorStr;
        tempCtx.fillRect(0, 0, 1, 1);
        const Cdata = tempCtx.getImageData(0, 0, 1, 1).data;
        return { r: Cdata[0], g: Cdata[1], b: Cdata[2] };
    }

    const parsedLowColor = parseColor(lowIntensityColor);
    const parsedMidColor = parseColor(midIntensityColor);
    const parsedHighColor = parseColor(highIntensityColor);

    const canvas = document.createElement('canvas');
    
    // Use naturalWidth/Height for intrinsic image dimensions.
    // Fallback to width/height if naturalWidth/Height are not available (e.g., for some SVG or if not loaded)
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Image has zero width or height. Returning empty canvas.");
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }
    
    canvas.width = imgWidth;
    canvas.height = imgHeight;
    
    const ctx = canvas.getContext('2d');

    if (!ctx) {
        console.error("Could not get 2D context for image processing. Returning an empty canvas.");
        // Return the canvas (it will be blank and correctly sized but without content)
        return canvas;
    }

    try {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error drawing original image: ", e);
        // Draw an error message on the canvas
        ctx.fillStyle = 'rgba(128, 128, 128, 0.8)'; // Gray background
        ctx.fillRect(0,0, canvas.width, canvas.height);
        ctx.font = 'bold 16px Arial';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.fillText('Error: Could not draw original image.', canvas.width / 2, canvas.height / 2);
        return canvas;
    }

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Error getting image data (cross-origin issue?): ", e);
        // Draw an error message on the canvas explaining the common cause
        ctx.fillStyle = 'rgba(128, 128, 128, 0.8)'; // Gray background, over any previous drawing
        ctx.fillRect(0, 0, canvas.width, canvas.height); 
        
        ctx.font = 'bold 16px Arial';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        
        let textY = canvas.height / 2 - 10;
        if (canvas.height < 40) textY = canvas.height / 2; // Adjust for small canvases

        ctx.fillText('Error: Could not process image pixels.', canvas.width / 2, textY);
        
        if (canvas.height >= 40) { // Only add second line if there's space
            textY += 20;
            ctx.font = '14px Arial';
            ctx.fillText('This may be due to cross-origin restrictions.', canvas.width / 2, textY);
        }
        return canvas;
    }
    
    const data = imageData.data;

    // Ensure thresholds are ordered correctly and clamped within the valid range [0, 255]
    let t1 = Math.min(threshold1, threshold2);
    let t2 = Math.max(threshold1, threshold2);
    
    t1 = Math.max(0, Math.min(255, t1));
    t2 = Math.max(0, Math.min(255, t2));

    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha channel (data[i+3]) is preserved

        // Calculate intensity (luminance)
        // Using the NTSC/PAL standard formula: Y = 0.299*R + 0.587*G + 0.114*B
        // Other options include average: (R+G+B)/3 or HDTV formula: 0.2126*R + 0.7152*G + 0.0722*B
        const intensity = 0.299 * r + 0.587 * g + 0.114 * b;

        let targetColor;
        if (intensity < t1) {
            targetColor = parsedLowColor;
        } else if (intensity < t2) {
            targetColor = parsedMidColor;
        } else {
            targetColor = parsedHighColor;
        }

        data[i] = targetColor.r;
        data[i + 1] = targetColor.g;
        data[i + 2] = targetColor.b;
    }

    ctx.putImageData(imageData, 0, 0);

    return canvas;
}