Photo Background And Green Particle Remover While Preserving Hair

/**
 * Removes a green screen background and suppresses green particles/fringing on edges (like hair).
 * 
 * @param {HTMLImageElement} originalImg - The original image object to process.
 * @param {number|string} minGreenness - Threshold (0.0 to 1.7) where green suppression starts (default: "0.15"). 
 *                                       Lower values affect more neutral colors with mild green tints.
 * @param {number|string} maxGreenness - Threshold (0.0 to 1.7) where pixels become fully fully transparent background (default: "1.2").
 *                                       Higher values preserve more hair details but might leave dark green shadows.
 * @param {number|string} despillStrength - How much green cast to remove from edges (default: "1.0" for 100%).
 * @returns {HTMLCanvasElement} - A canvas containing the processed image with transparency.
 */
function processImage(originalImg, minGreenness = "0.15", maxGreenness = "1.2", despillStrength = "1.0") {
    // Parse and sanitize parameters
    const th1 = Math.max(0, parseFloat(minGreenness) || 0.15);
    const rawTh2 = parseFloat(maxGreenness) || 1.2;
    const th2 = Math.max(th1 + 0.01, rawTh2); // Ensure th2 > th1 to prevent division by zero
    const dStr = Math.max(0, parseFloat(despillStrength) || 1.0);

    // Set up parsing canvas
    const canvas = document.createElement('canvas');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Retrieve pixel data
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Apply Chroma Key and Despill strictly focused on isolating Green spectrum
    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];

        if (a === 0) continue; // Skip naturally transparent pixels

        // 1. Evaluate green dominance over other channels
        let maxRB = Math.max(r, b);
        let greenDiff = Math.max(0, g - maxRB);

        // 2. Normalize the greenness against luminosity to make thresholding light-independent
        let luma = 0.299 * r + 0.587 * g + 0.114 * b;
        let greenness = greenDiff / Math.max(1.0, luma); 

        let alphaMult = 1.0;

        // 3. Determine Alpha Channel mapping (Background vs. Edge/Hair vs. Foreground)
        if (greenness >= th2) {
            // Absolute Background (Strong green screen key): Make fully transparent
            alphaMult = 0.0;
        } else if (greenness > th1) {
            // Edges & Hair Fringing: Smoothly blend the alpha transparency 1.0 -> 0.0
            // Normalize current position inside the threshold
            let t = (greenness - th1) / (th2 - th1);
            // Apply smoothstep interpolation for natural hair edges and anti-aliased transitions
            let smoothT = t * t * (3.0 - 2.0 * t);
            alphaMult = 1.0 - smoothT;
        }

        // Apply calculated transparency mask
        data[i+3] = Math.floor(a * alphaMult);

        // 4. Spill Suppression ("Despill" - Removing the green particles/halo around models)
        if (greenDiff > 0 && dStr > 0) {
            // Calculate despill intensity: Partial despill on mild foreground tints, 
            // and full 100% despill on the edges (like semi-transparent hair).
            let despillFactor = Math.min(1.0, greenness / th1);

            // Standard green chroma despilling technique: Restrict the green channel up to the max of Red and Blue.
            let targetG = maxRB;
            
            // Interpolate current green towards the despilled target green
            let finalG = g - (g - targetG) * despillFactor * dStr;
            data[i+1] = Math.max(0, Math.min(255, Math.floor(finalG)));
        }
    }

    // Write newly processed pixels back out
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}