Image Digitizer From Scan

/**
 * Processes an image to "digitize" it, which is interpreted as converting
 * it into a high-contrast, black-and-white image, similar to a scanned document.
 * This is achieved by applying a threshold to the grayscale value of each pixel.
 *
 * @param {Image} originalImg The original Image object to be processed.
 * @param {number} [threshold=128] A value between 0 and 255. Pixels with a brightness
 * below this value will become black, and those above will become white.
 * @returns {HTMLCanvasElement} A new canvas element with the digitized image.
 */
function processImage(originalImg, threshold = 128) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

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

    // Ensure the threshold is a valid number between 0 and 255
    const cleanThreshold = Math.max(0, Math.min(255, Number(threshold) || 128));

    // Iterate over each pixel in the image data array
    // The data array is a flat array of [R, G, B, A, 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];

        // Use the luminosity formula to convert RGB to a single grayscale value
        const grayscale = 0.299 * r + 0.587 * g + 0.114 * b;

        // Determine if the pixel should be black or white based on the threshold
        const colorValue = grayscale < cleanThreshold ? 0 : 255;

        // Set the new color for the pixel (black or white)
        data[i] = colorValue; // Red
        data[i + 1] = colorValue; // Green
        data[i + 2] = colorValue; // Blue
        // Alpha channel (data[i + 3]) is left untouched
    }

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

    // Return the canvas element containing the digitized image
    return canvas;
}