Photo To Text Converter

/**
 * Converts an image into a text-based representation (ASCII art).
 *
 * @param {Image} originalImg The original image object to be converted.
 * @param {string} charset A string of characters to use for the art, ordered from darkest to lightest.
 * @param {number} outputWidth The desired width of the output text art in characters. Height is calculated automatically.
 * @param {number} invert A flag to invert the brightness mapping (0 for normal, 1 for inverted).
 * @returns {HTMLElement} A <pre> element containing the generated text art.
 */
function processImage(originalImg, charset = 'Ñ@#W$9876543210?!abc;:+=-,._ ', outputWidth = 120, invert = 0) {
    // 1. Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // 2. Calculate the output dimensions
    // We adjust the height to compensate for the character aspect ratio (characters are taller than they are wide)
    const aspectRatio = originalImg.width / originalImg.height;
    const characterAspectRatio = 0.48; // This ratio can be finetuned for different fonts
    const outputHeight = Math.round((outputWidth / aspectRatio) * characterAspectRatio);

    canvas.width = outputWidth;
    canvas.height = outputHeight;

    // 3. Draw the downscaled image onto the canvas
    // This effectively samples the image into blocks corresponding to our final text characters
    ctx.drawImage(originalImg, 0, 0, outputWidth, outputHeight);

    // 4. Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, outputWidth, outputHeight);
    const data = imageData.data;

    let asciiString = '';
    const charsetLength = charset.length - 1;

    // 5. Iterate over the pixel data and build the text string
    for (let y = 0; y < outputHeight; y++) {
        for (let x = 0; x < outputWidth; x++) {
            const offset = (y * outputWidth + x) * 4;
            const r = data[offset];
            const g = data[offset + 1];
            const b = data[offset + 2];
            // We ignore the alpha channel `data[offset + 3]`

            // Calculate the average brightness of the pixel (0-255)
            const brightness = (r + g + b) / 3;

            // Map the brightness to an index in our character set
            // The brighter the pixel, the higher the index (and thus, a lighter character from our set)
            let charIndex = Math.floor((brightness / 255) * charsetLength);

            // Invert the mapping if the flag is set
            if (invert === 1) {
                charIndex = charsetLength - charIndex;
            }

            // Append the corresponding character to our string
            asciiString += charset[charIndex] || ' '; // Fallback to a space if index is out of bounds
        }
        // Add a new line after each row
        asciiString += '\n';
    }

    // 6. Create a <pre> element to display the result
    // The <pre> tag and a monospace font are crucial for the characters to align correctly
    const preElement = document.createElement('pre');
    preElement.textContent = asciiString;
    
    // Apply styling for proper display
    preElement.style.fontFamily = '"Courier New", Courier, monospace';
    preElement.style.lineHeight = '1.0';
    preElement.style.letterSpacing = '0px';
    preElement.style.fontSize = '8px'; // A smaller font size allows for more detail
    preElement.style.margin = '0';
    preElement.style.padding = '1em';
    preElement.style.backgroundColor = '#000000';
    preElement.style.color = '#FFFFFF';
    preElement.style.whiteSpace = 'pre';

    return preElement;
}