Image Alphabet Translator Link

/**
 * Translates an image into a text-based representation using a given alphabet of characters.
 * Darker areas of the image are mapped to characters at the beginning of the alphabet string,
 * while lighter areas are mapped to characters at the end.
 *
 * @param {Image} originalImg The original image object to be processed. The image must be fully loaded.
 * @param {string} [alphabet='@%#*+=-:. '] The string of characters to use for the translation, ordered from densest (for dark areas) to sparsest (for light areas).
 * @param {number} [blockSize=10] The size of the pixel grid (in pixels) to average for each character. A smaller number means more detail.
 * @param {number} [fontSize=8] The font size of the output text in pixels.
 * @param {string} [fontColor='#000000'] The color of the text characters.
 * @param {string} [backgroundColor='#ffffff'] The background color of the output container.
 * @returns {HTMLElement} A <pre> element containing the text representation of the image, which can be displayed in a div.
 */
function processImage(originalImg, alphabet = '@%#*+=-:. ', blockSize = 10, fontSize = 8, fontColor = '#000000', backgroundColor = '#ffffff') {
    // 1. Validate parameters
    const safeBlockSize = Math.max(1, Math.floor(blockSize));
    let validAlphabet = alphabet;
    if (typeof alphabet !== 'string' || alphabet.length === 0) {
        // Default alphabet from dense (for dark areas) to sparse (for light areas)
        validAlphabet = '@%#*+=-:. ';
    }

    // 2. Create an offscreen canvas to access pixel data
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    const originalWidth = originalImg.naturalWidth;
    const originalHeight = originalImg.naturalHeight;

    canvas.width = originalWidth;
    canvas.height = originalHeight;

    ctx.drawImage(originalImg, 0, 0, originalWidth, originalHeight);

    let imageData;
    try {
        // This can fail due to the browser's CORS policy if the image is from another domain
        imageData = ctx.getImageData(0, 0, originalWidth, originalHeight);
    } catch (e) {
        console.error("Could not get image data. The image might be from a different origin (CORS policy).", e);
        const errorElement = document.createElement('div');
        errorElement.textContent = "Error: Could not process the image due to cross-origin restrictions. Please use an image from the same domain or a CORS-enabled source.";
        errorElement.style.color = 'red';
        errorElement.style.padding = '1em';
        errorElement.style.border = '1px solid red';
        errorElement.style.backgroundColor = '#fff0f0';
        return errorElement;
    }

    const data = imageData.data;
    let textContent = '';

    // 3. Iterate over the image in blocks of size `safeBlockSize`
    for (let y = 0; y < originalHeight; y += safeBlockSize) {
        for (let x = 0; x < originalWidth; x += safeBlockSize) {
            let totalBrightness = 0;
            let pixelCount = 0;

            // 4. Calculate the average brightness for the current block
            for (let blockY = 0; blockY < safeBlockSize; blockY++) {
                for (let blockX = 0; blockX < safeBlockSize; blockX++) {
                    const currentX = x + blockX;
                    const currentY = y + blockY;

                    // Ensure the pixel is within the image bounds
                    if (currentX < originalWidth && currentY < originalHeight) {
                        const i = (currentY * originalWidth + currentX) * 4;
                        const r = data[i];
                        const g = data[i + 1];
                        const b = data[i + 2];

                        // Use the luminance formula for a more perceptually accurate grayscale conversion
                        const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
                        totalBrightness += brightness;
                        pixelCount++;
                    }
                }
            }

            if (pixelCount === 0) continue;

            const avgBrightness = totalBrightness / pixelCount;

            // 5. Map the average brightness (range 0-255) to a character in the alphabet
            // Brightness range [0, 255] is mapped to index range [0, alphabet.length - 1]
            const charIndex = Math.floor((avgBrightness / 256) * validAlphabet.length);
            textContent += validAlphabet[charIndex];
        }
        textContent += '\n'; // Add a new line at the end of each row
    }

    // 6. Create and style the output element
    const pre = document.createElement('pre');
    pre.textContent = textContent;

    // Styling is crucial for the ASCII art effect to look correct
    pre.style.fontFamily = '"Courier New", Courier, monospace';
    pre.style.fontSize = `${fontSize}px`;
    pre.style.color = fontColor;
    pre.style.backgroundColor = backgroundColor;
    // Adjust line-height to compensate for the typical aspect ratio of text characters (taller than wide)
    pre.style.lineHeight = '0.8em';
    pre.style.margin = '0';
    pre.style.whiteSpace = 'pre';
    pre.style.overflow = 'auto';

    return pre;
}