Image Gradient Map Application

function processImage(originalImg, colorsStr = "#2a164c,#f42e5b", positionsStr = "") {
    // Determine image dimensions
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Create the main canvas
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    
    // Draw original image onto canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Parse colors
    let colors = colorsStr.split(',').map(c => c.trim()).filter(c => c !== "");
    if (colors.length === 0) {
        colors = ["#2a164c", "#f42e5b"]; // Fallback duotone colors
    } else if (colors.length === 1) {
        colors.push(colors[0]); // Need at least two colors for a gradient 
    }

    // Parse positions
    let positions = [];
    if (positionsStr && positionsStr.trim() !== "") {
        positions = positionsStr.split(',')
            .map(p => parseFloat(p.trim()))
            .filter(p => !isNaN(p));
    }

    // Create a 256x1 canvas to act as a Gradient Lookup Table (LUT)
    const lutCanvas = document.createElement('canvas');
    lutCanvas.width = 256;
    lutCanvas.height = 1;
    const lutCtx = lutCanvas.getContext('2d', { willReadFrequently: true });
    
    // Build the gradient map
    const gradient = lutCtx.createLinearGradient(0, 0, 256, 0);
    for (let i = 0; i < colors.length; i++) {
        let pos;
        if (i < positions.length) {
            pos = positions[i];
        } else {
            // Evenly distribute any colors without explicit positions
            pos = i / (colors.length - 1);
        }
        
        // Ensure position is strictly between 0 and 1
        pos = Math.max(0, Math.min(1, pos));
        
        try {
            gradient.addColorStop(pos, colors[i]);
        } catch (e) {
            // Ignore invalid color inputs and fallback gracefully
            gradient.addColorStop(pos, "#000000"); 
        }
    }
    
    // Draw the gradient to generate our LUT pixels
    lutCtx.fillStyle = gradient;
    lutCtx.fillRect(0, 0, 256, 1);
    
    const lutData = lutCtx.getImageData(0, 0, 256, 1).data;

    // Apply the LUT to the original image
    try {
        const imgData = ctx.getImageData(0, 0, width, height);
        const data = imgData.data;

        for (let i = 0; i < data.length; i += 4) {
            // Ignore fully transparent pixels
            if (data[i + 3] === 0) continue; 
            
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];

            // Calculate luminance using standard NTSC relative luminance formula
            let lum = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
            lum = Math.max(0, Math.min(255, lum));

            // Map luminance to the corresponding pixel in our LUT
            const lutIndex = lum * 4;
            
            data[i] = lutData[lutIndex];         // R
            data[i + 1] = lutData[lutIndex + 1]; // G
            data[i + 2] = lutData[lutIndex + 2]; // B
            // data[i + 3] is Alpha, which we leave unchanged to preserve transparency.
        }

        ctx.putImageData(imgData, 0, 0);
    } catch (e) {
        // Fallback for CORS (Cross-Origin Resource Sharing) restrictions.
        console.error("Could not process image data due to cross-origin restrictions.", e);
    }

    return canvas;
}