Image To Binary Converter

/**
 * Converts an image to a binary (black and white) image based on a luminance threshold.
 *
 * @param {Image} originalImg The original Image object to process.
 * @param {number} threshold A number between 0 and 255. Pixels with luminance above this value will become white, and those below will become black. Defaults to 128.
 * @returns {HTMLCanvasElement} A canvas element displaying the binary image.
 */
function processImage(originalImg, threshold = 128) {
    // 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;

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

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

    // Ensure threshold is a valid number between 0 and 255
    let numericThreshold = Number(threshold);
    if (isNaN(numericThreshold) || numericThreshold < 0 || numericThreshold > 255) {
        console.warn(`Invalid threshold value: ${threshold}. Using default 128.`);
        numericThreshold = 128;
    }

    // Iterate through each pixel (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];

        // Calculate the luminance (perceived brightness) of the pixel
        // Using the standard formula for converting RGB to grayscale
        const luminance = 0.299 * r + 0.587 * g + 0.114 * b;

        // Apply the threshold to determine if the pixel should be black or white
        const color = luminance >= numericThreshold ? 255 : 0;

        // Set the new RGB values for the pixel
        data[i] = color;     // Red
        data[i + 1] = color; // Green
        data[i + 2] = color; // Blue
        // The alpha channel (data[i + 3]) is left unchanged
    }

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

    // Return the resulting canvas
    return canvas;
}