Image Spectral Analysis Filter Effect Tool

async function processImage(originalImg, startHue = 240, endHue = 0, saturation = 100, lightness = 50) {
    const canvas = document.createElement('canvas');
    // Use { willReadFrequently: true } for potential performance optimization if this function is called often.
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Ensure image dimensions are valid. naturalWidth/Height are 0 if image is not loaded or invalid.
    if (originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        console.warn("Image has zero dimensions. It might not be loaded correctly. Returning a 1x1 transparent canvas.");
        canvas.width = 1;
        canvas.height = 1;
        // Fill with transparent color
        ctx.fillStyle = "rgba(0,0,0,0)";
        ctx.fillRect(0, 0, 1, 1);
        return canvas;
    }

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

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

    try {
        // Get image data from the canvas
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;

        // Validate and normalize parameters
        const finalStartHue = (Number(startHue) % 360 + 360) % 360; // Ensures hue is in [0, 360)
        const finalEndHue = (Number(endHue) % 360 + 360) % 360;   // Ensures hue is in [0, 360)
        const finalSaturation = Math.max(0, Math.min(100, Number(saturation))); // Clamp to [0, 100]
        const finalLightness = Math.max(0, Math.min(100, Number(lightness)));  // Clamp to [0, 100]

        // Helper function: HSL to RGB conversion
        // h: hue (any number, effectively wrapped in calculations)
        // s: saturation (0-100)
        // l: lightness (0-100)
        // Returns [r, g, b] each in [0, 255]
        function hslToRgb(h, s, l) {
            s /= 100; // convert s to 0-1 range
            l /= 100; // convert l to 0-1 range

            const k = n => (n + h / 30) % 12;
            const a = s * Math.min(l, 1 - l);
            const f = n =>
                l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));

            return [
                Math.round(255 * f(0)), // Red
                Math.round(255 * f(8)), // Green
                Math.round(255 * f(4)), // Blue
            ];
        }

        // Iterate through each pixel (4 bytes at a time: R, G, B, A)
        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 luminance using Rec. 709 formula (standard for HDTV)
            // Luminance value will be in the range [0, 255]
            const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
            
            // Normalize luminance to a 0-1 range
            const normalizedLuminance = luminance / 255;

            // Interpolate hue based on normalized luminance
            // If finalStartHue is 240 (blue) and finalEndHue is 0 (red):
            // Low luminance (0) maps to blue.
            // High luminance (1) maps to red.
            // Mid luminance (0.5) maps to 240 + 0.5 * (0 - 240) = 240 - 120 = 120 (green).
            // This creates a Blue -> Green -> Red spectrum.
            const currentHue = finalStartHue + normalizedLuminance * (finalEndHue - finalStartHue);

            // Convert the HSL color (currentHue, finalSaturation, finalLightness) to RGB
            const [newR, newG, newB] = hslToRgb(currentHue, finalSaturation, finalLightness);

            // Update pixel data
            data[i] = newR;
            data[i + 1] = newG;
            data[i + 2] = newB;
            // data[i+3] (alpha) remains unchanged
        }

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

    } catch (e) {
        // This can happen, for example, if the image is from a different origin (CORS issue)
        console.error("Error processing image data for Spectral Analysis Filter:", e);
        // In case of an error, the canvas will still contain the original image drawn by ctx.drawImage.
        // Depending on desired behavior, an error message could be drawn on the canvas here.
        // For now, it returns the canvas with the original image if processing fails.
    }
    
    return canvas;
}