Image Color To Grey Filter Viewer

function processImage(originalImg, colorStr = '#ff0000', tolerance = 40) {
    // 1. Parse the target color into RGB using a dummy 1x1 canvas
    // This safely extracts RGB components from ANY valid CSS color string (hex, named, rgb, etc.)
    const parserCanvas = document.createElement('canvas');
    parserCanvas.width = 1;
    parserCanvas.height = 1;
    const pCtx = parserCanvas.getContext('2d');
    pCtx.fillStyle = colorStr;
    pCtx.fillRect(0, 0, 1, 1);
    const targetRgb = pCtx.getImageData(0, 0, 1, 1).data;
    const tR = targetRgb[0];
    const tG = targetRgb[1];
    const tB = targetRgb[2];

    // Helper to convert RGB to HSL for perceptually better color matching
    function rgbToHsl(r, g, b) {
        r /= 255; 
        g /= 255; 
        b /= 255;
        const max = Math.max(r, g, b);
        const min = Math.min(r, g, b);
        let h = 0, s = 0, l = (max + min) / 2;
        
        if (max !== min) {
            const d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch (max) {
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }
        return [h * 360, s * 100, l * 100];
    }

    const targetHsl = rgbToHsl(tR, tG, tB);
    
    // Check if the target color is fundamentally achromatic (shades of grey/black/white)
    const isTargetGrey = targetHsl[1] < 15 || targetHsl[2] < 10 || targetHsl[2] > 90;

    // 2. Prepare the main processing canvas
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    // Return empty canvas immediately if the image has invalid dimensions
    if (canvas.width === 0 || canvas.height === 0) return canvas;

    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    ctx.drawImage(originalImg, 0, 0);

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

    // 3. Process every pixel
    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; // Skip computing purely transparent pixels

        let match = false;

        if (isTargetGrey) {
            // For achromatic target colors, use standard RGB Euclidean Distance
            const dist = Math.sqrt((r - tR)**2 + (g - tG)**2 + (b - tB)**2);
            // Map the semantic 'tolerance' string (0-100+) to a reasonable RGB max distance (sqrt(3 * 255^2) ≈ 441)
            if (dist <= tolerance * 4.41) {
                match = true;
            }
        } else {
            // For colorful target colors, selectively keep pixels matching the Hue
            const hsl = rgbToHsl(r, g, b);
            
            // If the pixel itself is too desaturated/dark/bright, it won't count as a match for a vibrant color
            const isPixelGrey = hsl[1] < 10 || hsl[2] < 10 || hsl[2] > 90;
            
            if (!isPixelGrey) {
                let hDiff = Math.abs(targetHsl[0] - hsl[0]);
                if (hDiff > 180) hDiff = 360 - hDiff;
                
                // Compare radial hue distance and accept if it falls within the wedge
                if (hDiff <= tolerance) {
                    match = true;
                }
            }
        }

        // 4. Apply Grey filter to non-matching pixels while leaving matches untouched
        if (!match) {
            // Standard luminosity formula preserves perceptual brightness
            const grey = 0.299 * r + 0.587 * g + 0.114 * b;
            data[i] = grey;
            data[i + 1] = grey;
            data[i + 2] = grey;
        }
    }

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