Image To Two Converter

function processImage(originalImg, color1 = '#000000', color2 = '#ffffff', threshold = 128) {
    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;
    
    // Helper function to extract exact RGB values from any valid CSS color string
    const parseColor = (colorStr) => {
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = 1;
        tempCanvas.height = 1;
        const tempCtx = tempCanvas.getContext('2d');
        tempCtx.fillStyle = colorStr;
        tempCtx.fillRect(0, 0, 1, 1);
        return tempCtx.getImageData(0, 0, 1, 1).data;
    };

    const rgb1 = parseColor(color1);
    const rgb2 = parseColor(color2);
    
    // Ensure threshold is a valid number
    let threshVal = parseInt(threshold, 10);
    if (isNaN(threshVal)) {
        threshVal = 127;
    }

    // Iterate through every pixel and apply the two-color (duotone/binary) threshold effect
    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];

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

        // Calculate relative luminance
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;

        // Choose color based on threshold comparison
        if (luminance < threshVal) {
            data[i]     = rgb1[0]; // R
            data[i + 1] = rgb1[1]; // G
            data[i + 2] = rgb1[2]; // B
            // Preserve original alpha
        } else {
            data[i]     = rgb2[0]; // R
            data[i + 1] = rgb2[1]; // G
            data[i + 2] = rgb2[2]; // B
            // Preserve original alpha
        }
    }

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