Image Thresholding Without Grayscale Tool

/**
 * Applies a threshold to an image without first converting it to a visible grayscale image.
 * It calculates the luminance of each pixel and compares it to a threshold value.
 * Pixels with luminance below the threshold are set to a 'below' color, and those above or equal are set to an 'above' color.
 *
 * @param {HTMLImageElement} originalImg The original image element to process. The image must be loaded.
 * @param {number} [threshold=128] The threshold value (0-255) to distinguish between the two colors.
 * @param {string} [belowColor='#000000'] A CSS color string for pixels with luminance below the threshold.
 * @param {string} [aboveColor='#FFFFFF'] A CSS color string for pixels with luminance at or above the threshold.
 * @returns {HTMLCanvasElement} A new canvas element with the thresholded image.
 */
function processImage(originalImg, threshold = 128, belowColor = '#000000', aboveColor = '#FFFFFF') {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

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

    // Get the image data from the canvas
    // Note: This will throw a security error if the image is from a different origin without CORS configured.
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    /**
     * Helper function to parse any valid CSS color string into an {r, g, b} object.
     * @param {string} colorStr The CSS color string (e.g., '#FFF', 'rgb(0,0,0)', 'black').
     * @returns {{r: number, g: number, b: number}} An object with r, g, b components.
     */
    const parseColor = (colorStr) => {
        // We use a temporary 1x1 canvas to let the browser do the parsing.
        const tempCtx = document.createElement('canvas').getContext('2d');
        tempCtx.canvas.width = 1;
        tempCtx.canvas.height = 1;
        tempCtx.fillStyle = colorStr;
        tempCtx.fillRect(0, 0, 1, 1);
        const colorData = tempCtx.getImageData(0, 0, 1, 1).data;
        return {
            r: colorData[0],
            g: colorData[1],
            b: colorData[2]
        };
    };

    const belowRgb = parseColor(belowColor);
    const aboveRgb = parseColor(aboveColor);

    // Iterate over each pixel (4 bytes at a time: 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];

        // Calculate luminance using the standard formula for perceived brightness
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;

        // Apply the threshold
        if (luminance < threshold) {
            data[i] = belowRgb.r; // Red channel
            data[i + 1] = belowRgb.g; // Green channel
            data[i + 2] = belowRgb.b; // Blue channel
        } else {
            data[i] = aboveRgb.r; // Red channel
            data[i + 1] = aboveRgb.g; // Green channel
            data[i + 2] = aboveRgb.b; // Blue channel
        }
        // The alpha channel (data[i + 3]) is preserved
    }

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

    return canvas;
}