Image To Black Excellence Converter

function processImage(originalImg, darkColor = '#000000', midColor = '#ff0000', lightColor = '#008000', darkThreshold = 85, midThreshold = 170) {
    /**
     * Helper function to parse a hex color string to an [r, g, b] array.
     * Supports both 3 and 6 digit hex codes.
     * @param {string} hex - The hex color string (e.g., "#FFF", "#ff0000").
     * @returns {number[]|null} - An array [r, g, b] or null if invalid.
     */
    function hexToRgb(hex) {
        // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
        const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        hex = hex.replace(shorthandRegex, (m, r, g, b) => {
            return r + r + g + g + b + b;
        });

        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? [
            parseInt(result[1], 16),
            parseInt(result[2], 16),
            parseInt(result[3], 16)
        ] : null;
    }

    const rgbDark = hexToRgb(darkColor);
    const rgbMid = hexToRgb(midColor);
    const rgbLight = hexToRgb(lightColor);

    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    // Handle invalid color inputs gracefully
    if (!rgbDark || !rgbMid || !rgbLight) {
        console.error("Invalid hex color provided. Please use format #RRGGBB or #RGB.");
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'red';
        ctx.textAlign = 'center';
        ctx.font = '16px Arial';
        ctx.fillText('Invalid color parameter.', canvas.width / 2, canvas.height / 2);
        return canvas;
    }


    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Iterate over each pixel in the image data array
    // Each pixel is represented by 4 values: R, G, B, A
    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 the pixel is transparent, skip it to preserve transparency
        if (a === 0) {
            continue;
        }

        // Calculate the grayscale luminance value of the pixel
        const grayscale = 0.299 * r + 0.587 * g + 0.114 * b;

        let newColor;
        // Determine which of the three colors to use based on thresholds
        if (grayscale < darkThreshold) {
            newColor = rgbDark;
        } else if (grayscale < midThreshold) {
            newColor = rgbMid;
        } else {
            newColor = rgbLight;
        }

        // Update the pixel data with the new color
        data[i] = newColor[0];     // Red channel
        data[i + 1] = newColor[1]; // Green channel
        data[i + 2] = newColor[2]; // Blue channel
        // Alpha channel (data[i + 3]) is preserved
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // Return the processed canvas element
    return canvas;
}