Pink Color Image Picker

function processImage(originalImg, tolerance = "40", baseHue = "320", minSaturation = "15", minLightness = "15", maxLightness = "95") {
    // Parse the parameters, making sure they are treated as floats
    const tol = parseFloat(tolerance);
    const targetHue = parseFloat(baseHue); // 320 is typically a solid pink
    const minSat = parseFloat(minSaturation);
    const minLight = parseFloat(minLightness);
    const maxLight = parseFloat(maxLightness);

    // Create canvas and get context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set actual image dimensions
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;
    
    // Draw original image on the canvas
    ctx.drawImage(originalImg, 0, 0);
    
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Cross-origin error when reading image. Ensure the image can be read by Canvas API:", e);
        return canvas;
    }
    
    const data = imageData.data;
    
    // Helper function to convert RGB to HSL
    function rgbToHsl(r, g, b) {
        r /= 255; 
        g /= 255; 
        b /= 255;
        
        let max = Math.max(r, g, b), min = Math.min(r, g, b);
        let h = 0, s = 0, l = (max + min) / 2;

        if (max !== min) {
            let 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];
    }
    
    // Loop through all pixels
    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i+1];
        let b = data[i+2];
        let a = data[i+3];
        
        // Skip fully transparent pixels to save computation
        if (a === 0) continue;
        
        let [h, s, l] = rgbToHsl(r, g, b);
        
        // Calculate shortest distance on the 360-degree color wheel
        let diff = Math.abs(h - targetHue);
        let hueDistance = Math.min(diff, 360 - diff);
        
        // Isolate the pink colors based on defined ranges
        let isPink = hueDistance <= tol && s >= minSat && l >= minLight && l <= maxLight;
        
        if (!isPink) {
            // Apply grayscale effect to all non-pink colors
            let gray = 0.299 * r + 0.587 * g + 0.114 * b;
            data[i] = gray;     // R
            data[i+1] = gray;   // G
            data[i+2] = gray;   // B
        }
    }
    
    // Put modified data back onto the canvas
    ctx.putImageData(imageData, 0, 0);
    
    return canvas;
}