Image To Binary Text Converter With Transparency And Boldness Control

/**
 * Converts an image to binary text art, rendering it on a canvas.
 * This function handles image transparency and allows control over text boldness.
 *
 * @param {HTMLImageElement} originalImg The original image element to convert.
 * @param {number} [brightnessThreshold=128] A value from 0 to 255. Pixels with brightness above this are considered 'light'.
 * @param {number} [alphaThreshold=128] A value from 0 to 255. Pixels with alpha below this are treated as transparent.
 * @param {number} [fontWeight=400] The font weight for the output text (e.g., 400 for normal, 700 for bold).
 * @param {number} [fontSize=8] The font size in pixels for the output characters.
 * @param {string} [fontFamily='monospace'] The font family to use. Monospace fonts are highly recommended for alignment.
 * @param {string} [charForLight='0'] The character used to represent light pixels. Assumed to be a single character.
 * @param {string} [charForDark='1'] The character used to represent dark pixels. Assumed to be a single character.
 * @param {string} [backgroundColor='white'] The background color of the output canvas.
 * @param {string} [textColor='black'] The color of the binary text.
 * @returns {HTMLCanvasElement} A new canvas element with the binary text art drawn on it.
 */
function processImage(originalImg, brightnessThreshold = 128, alphaThreshold = 128, fontWeight = 400, fontSize = 8, fontFamily = 'monospace', charForLight = '0', charForDark = '1', backgroundColor = 'white', textColor = 'black') {
    // Create a temporary canvas to get the pixel data from the image
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d', {
        willReadFrequently: true
    });

    // To prevent performance issues with very large images, we can scale it down.
    // The number of characters will be the dimension of this scaled image.
    const maxDimension = 250;
    let width = originalImg.width;
    let height = originalImg.height;

    if (width > maxDimension || height > maxDimension) {
        if (width > height) {
            height = Math.round(height * (maxDimension / width));
            width = maxDimension;
        } else {
            width = Math.round(width * (maxDimension / height));
            height = maxDimension;
        }
    }

    tempCanvas.width = width;
    tempCanvas.height = height;
    tempCtx.drawImage(originalImg, 0, 0, width, height);
    const imageData = tempCtx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Generate the array of text lines from pixel data
    const textLines = [];
    for (let y = 0; y < height; y++) {
        let line = '';
        for (let x = 0; x < width; x++) {
            const index = (y * width + x) * 4;
            const r = data[index];
            const g = data[index + 1];
            const b = data[index + 2];
            const a = data[index + 3];

            if (a < alphaThreshold) {
                line += ' '; // Transparent pixels become spaces
            } else {
                // Calculate brightness using the luminosity method
                const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
                line += (brightness > brightnessThreshold) ? charForLight : charForDark;
            }
        }
        textLines.push(line);
    }

    // Create the output canvas to draw the text on
    const outputCanvas = document.createElement('canvas');
    const outputCtx = outputCanvas.getContext('2d');
    const font = `${fontWeight} ${fontSize}px ${fontFamily}`;
    outputCtx.font = font;

    // Measure a sample character to calculate the required canvas size
    const textMetrics = outputCtx.measureText(charForDark); // Use one of the chars for measurement
    const charWidth = textMetrics.width;
    const lineHeight = fontSize * 1.1; // Provide a little extra space between lines

    outputCanvas.width = Math.ceil(charWidth * width);
    outputCanvas.height = Math.ceil(lineHeight * height);

    // Set canvas background
    outputCtx.fillStyle = backgroundColor;
    outputCtx.fillRect(0, 0, outputCanvas.width, outputCanvas.height);

    // Set text properties and draw each line
    // The font needs to be restated as it's reset when canvas is resized
    outputCtx.font = font;
    outputCtx.fillStyle = textColor;
    outputCtx.textBaseline = 'top';

    for (let i = 0; i < textLines.length; i++) {
        outputCtx.fillText(textLines[i], 0, i * lineHeight);
    }

    return outputCanvas;
}