Image Address Translator For Alphabet Illustrations

/**
 * Translates an image into a grid of characters based on pixel brightness,
 * creating a text-based illustration using a specified alphabet.
 *
 * @param {HTMLImageElement} originalImg The source image object. The image must be fully loaded.
 * @param {number} [gridSize=100] The width of the resulting text art in characters. The height is calculated automatically based on the image's aspect ratio.
 * @param {string} [alphabet='ABCDEFGHIJKLMNOPQRSTUVWXYZ'] The set of characters to map brightness to. The first character represents the darkest pixels, and the last represents the brightest.
 * @returns {HTMLElement} A styled <pre> element containing the generated text art, suitable for display.
 */
function processImage(originalImg, gridSize = 100, alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ') {

    // 1. Create an in-memory canvas to analyze the image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    if (!ctx) {
        console.error("Canvas 2D context is not supported.");
        const errorDiv = document.createElement('div');
        errorDiv.textContent = 'Error: This browser does not support the required Canvas API.';
        return errorDiv;
    }

    // 2. Calculate the dimensions for the output grid
    // The height is adjusted by a correction factor to account for the typical
    // non-square aspect ratio of characters in monospace fonts.
    const aspectRatio = originalImg.width / originalImg.height;
    const characterAspectRatioCorrection = 0.5;
    const gridWidth = Math.floor(gridSize);
    const gridHeight = Math.floor(gridSize / aspectRatio * characterAspectRatioCorrection);

    canvas.width = gridWidth;
    canvas.height = gridHeight;

    // 3. Draw the image onto the small canvas. This effectively resamples the image
    // into blocks, where each pixel on the canvas represents one block.
    ctx.drawImage(originalImg, 0, 0, gridWidth, gridHeight);

    // 4. Get the pixel data from the canvas
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, gridWidth, gridHeight);
    } catch (e) {
        console.error("Could not get image data. This may be due to a cross-origin (CORS) issue.", e);
        const errorDiv = document.createElement('div');
        errorDiv.textContent = 'Error: Cannot process the image. It might be loaded from a different domain without the proper CORS headers.';
        errorDiv.style.color = 'red';
        errorDiv.style.padding = '1em';
        errorDiv.style.border = '1px solid red';
        return errorDiv;
    }

    const data = imageData.data;
    let resultString = '';
    const alphabetLength = alphabet.length;

    // 5. Iterate through each pixel of the sampled image
    for (let y = 0; y < gridHeight; y++) {
        for (let x = 0; x < gridWidth; x++) {
            const index = (y * gridWidth + x) * 4;
            const r = data[index];
            const g = data[index + 1];
            const b = data[index + 2];

            // Calculate the grayscale brightness (luminance) of the pixel
            const brightness = 0.299 * r + 0.587 * g + 0.114 * b;

            // Map the brightness value (0-255) to a character in the alphabet
            const charIndex = Math.floor((brightness / 255) * (alphabetLength - 1));
            resultString += alphabet[charIndex] || ' ';
        }
        resultString += '\n'; // Add a newline after each row
    }

    // 6. Create a <pre> element to display the result while preserving whitespace
    const preElement = document.createElement('pre');
    preElement.textContent = resultString;

    // 7. Apply styles for a clear and aesthetically pleasing presentation
    preElement.style.fontFamily = '"Courier New", Courier, monospace';
    preElement.style.fontSize = '10px';
    preElement.style.lineHeight = '0.8'; // Use tight line spacing for a better image effect
    preElement.style.margin = '0';
    preElement.style.display = 'inline-block';
    preElement.style.backgroundColor = '#1a1a1a'; // A dark background often works well
    preElement.style.color = '#e0e0e0';
    preElement.style.padding = '1em';
    preElement.style.border = '1px solid #333';
    preElement.style.borderRadius = '4px';

    return preElement;
}