Image Body Temperature Scan Filter Effect Tool

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

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

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

    ctx.drawImage(originalImg, 0, 0);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Thermal color palette: from cold (black/blue) to hot (red/orange/yellow)
    // Stops are normalized (0.0 to 1.0)
    const thermalPalette = [
        { stop: 0.0,  color: [0, 0, 0] },      // Black
        { stop: 0.1,  color: [30, 0, 100] },   // Dark Purple/Indigo
        { stop: 0.25, color: [0, 0, 255] },    // Blue
        { stop: 0.4,  color: [0, 255, 255] },  // Cyan
        { stop: 0.55, color: [0, 255, 0] },    // Green
        { stop: 0.7,  color: [255, 255, 0] },  // Yellow
        { stop: 0.85, color: [255, 128, 0] },  // Orange
        { stop: 1.0,  color: [255, 0, 0] }     // Red
    ];

    // Helper function to interpolate between two colors
    function interpolateColor(color1, color2, factor) {
        const r = Math.round(color1[0] * (1 - factor) + color2[0] * factor);
        const g = Math.round(color1[1] * (1 - factor) + color2[1] * factor);
        const b = Math.round(color1[2] * (1 - factor) + color2[2] * factor);
        return [r, g, b];
    }

    // Helper function to get color from the palette based on intensity
    function getColorFromGradient(intensity, palette) {
        if (intensity <= palette[0].stop) {
            return palette[0].color;
        }
        if (intensity >= palette[palette.length - 1].stop) {
            return palette[palette.length - 1].color;
        }

        for (let i = 0; i < palette.length - 1; i++) {
            const s1 = palette[i];
            const s2 = palette[i + 1];
            if (intensity >= s1.stop && intensity < s2.stop) {
                // Ensure s2.stop is greater than s1.stop to avoid division by zero
                if (s2.stop === s1.stop) return s1.color; 
                const factor = (intensity - s1.stop) / (s2.stop - s1.stop);
                return interpolateColor(s1.color, s2.color, factor);
            }
        }
        // Should be covered by initial checks, but as a fallback:
        return palette[palette.length - 1].color;
    }

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

        // Calculate grayscale intensity (luminance)
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;
        
        // Normalize intensity to 0.0 - 1.0 range
        const normalizedIntensity = gray / 255;

        // Get the corresponding color from the thermal palette
        const newColor = getColorFromGradient(normalizedIntensity, thermalPalette);

        data[i] = newColor[0];     // Red
        data[i + 1] = newColor[1]; // Green
        data[i + 2] = newColor[2]; // Blue
        // data[i + 3] (alpha) remains unchanged
    }

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