Image Dusk Color Extractor

function processImage(originalImg, tolerancePercent = 20, nonDuskPixels = "transparent") {
    // Canonical "Dusk" color representation (a dark purplish-blue)
    const duskHex = "#4E5481"; 
    
    // Parse hex to RGB
    const hexToRgb = (hex) => {
        let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
        let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : {r: 78, g: 84, b: 129};
    };

    const targetColor = hexToRgb(duskHex);

    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    
    // Calculate the maximum possible distance in 3D RGB space to evaluate the threshold
    const maxDistance = Math.sqrt(255 * 255 * 3);
    const threshold = (Number(tolerancePercent) / 100) * maxDistance;
    
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        const a = data[i + 3];
        
        if (a === 0) continue;
        
        // Calculate Euclidean distance between the current pixel and the Dusk color
        const distance = Math.sqrt(
            Math.pow(r - targetColor.r, 2) + 
            Math.pow(g - targetColor.g, 2) + 
            Math.pow(b - targetColor.b, 2)
        );
        
        // Extract the dusk color by modifying non-matching pixels
        if (distance > threshold) {
            if (nonDuskPixels === "transparent") {
                data[i + 3] = 0;
            } else if (nonDuskPixels === "grayscale") {
                const gray = 0.299 * r + 0.587 * g + 0.114 * b;
                data[i] = data[i + 1] = data[i + 2] = gray;
            } else if (nonDuskPixels === "black") {
                data[i] = data[i + 1] = data[i + 2] = 0;
            } else if (nonDuskPixels === "white") {
                data[i] = data[i + 1] = data[i + 2] = 255;
            }
        }
    }
    
    ctx.putImageData(imageData, 0, 0);
    return canvas;
}