Image To Block Symbols Converter

/**
 * Converts an image to a text-based representation using block symbols.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} maxElements The maximum number of characters to use for the output.
 * @returns {HTMLPreElement} A <pre> element containing the block symbol art.
 */
function processImage(originalImg, maxElements = 999) {
    // A curated list of symbols from the prompt, ordered from darkest to lightest by visual density.
    // This ordering determines how image brightness maps to characters.
    const darkToLightRamp = "█▉❚▊▇▓▋▆❙▅▌▐▀▒▍▄❘▎▃░▕▏▂▔ ";

    // --- 1. Calculate the dimensions of the output character grid ---
    // The aspect ratio is fixed at 4:3 as per the description.
    const aspectRatio = 4 / 3;
    // Calculate height and width based on the max element limit and aspect ratio.
    let charHeight = Math.floor(Math.sqrt(maxElements / aspectRatio));
    let charWidth = Math.floor(charHeight * aspectRatio);

    // Ensure dimensions are at least 1x1.
    charWidth = Math.max(1, charWidth);
    charHeight = Math.max(1, charHeight);

    // --- 2. Downsample the image to the character grid dimensions ---
    // Create a temporary canvas to sample pixel data from a scaled-down version of the image.
    const canvas = document.createElement('canvas');
    canvas.width = charWidth;
    canvas.height = charHeight;
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    // Disable image smoothing to get sharp, distinct color blocks for each character.
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(originalImg, 0, 0, charWidth, charHeight);

    // --- 3. Generate the text art ---
    // Get the pixel data from the downsampled image.
    const imageData = ctx.getImageData(0, 0, charWidth, charHeight);
    const data = imageData.data;
    const lines = [];

    // Iterate over each cell of our character grid (which corresponds to one pixel in our downsampled canvas).
    for (let y = 0; y < charHeight; y++) {
        let line = '';
        for (let x = 0; x < charWidth; x++) {
            // Calculate the index for the current pixel in the imageData array.
            const i = (y * charWidth + x) * 4;
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];

            // Convert the pixel's color to a single grayscale brightness value (0-255).
            const brightness = 0.299 * r + 0.587 * g + 0.114 * b;

            // Map the brightness value to a character in our ramp.
            // A brightness of 0 (black) maps to the first character ('█'),
            // and 255 (white) maps to the last character (' ').
            const rampIndex = Math.floor((brightness / 256) * darkToLightRamp.length);
            const char = darkToLightRamp[rampIndex];
            line += char;
        }
        lines.push(line);
    }

    // --- 4. Create and style the output element ---
    // A <pre> tag is ideal for displaying monospaced text and preserving line breaks.
    const pre = document.createElement('pre');
    pre.textContent = lines.join('\n');

    // Apply styles to ensure the output looks good.
    pre.style.display = 'inline-block';
    pre.style.fontFamily = 'monospace';
    pre.style.fontSize = '8px'; // A small font size helps fit more detail.
    pre.style.lineHeight = '0.7em'; // Compress line height to correct character aspect ratio.
    pre.style.letterSpacing = '0em';
    pre.style.margin = '0';
    pre.style.padding = '1em';
    pre.style.backgroundColor = '#1e1e1e'; // A dark background for a "terminal" look.
    pre.style.color = '#dcdcdc'; // An off-white color for the text.

    return pre;
}