Image Alphabet Translation Tool

/**
 * Translates an image into a text representation using a specified alphabet (e.g., Cyrillic or ASCII).
 * This function converts the brightness levels of an image's pixels into characters,
 * effectively creating a text-based version of the image.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {number} characterWidth The desired width of the output text in characters. Default is 100. The height is calculated automatically to maintain the original aspect ratio.
 * @param {string} alphabet The character set to use. Can be 'cyrillic' or 'ascii'. This is ignored if customChars is provided. Default is 'cyrillic'.
 * @param {string} customChars A custom string of characters to use for mapping, ordered from darkest to lightest. If provided, it overrides the 'alphabet' parameter.
 * @param {number} invert A flag to invert the brightness mapping. If 1, light areas of the image will be represented by dark characters and vice-versa. Default is 0.
 * @returns {HTMLElement} A <pre> element containing the text representation of the image, styled for proper display.
 */
function processImage(originalImg, characterWidth = 100, alphabet = 'cyrillic', customChars = '', invert = 0) {
    // 1. Sanitize parameters and set up character mapping
    const width = parseInt(characterWidth, 10) || 100;
    const shouldInvert = !!parseInt(invert, 10);

    // Character sets are ordered from visually darkest to lightest.
    // This allows mapping dark pixels (low brightness) to the start of the string
    // and light pixels (high brightness) to the end of the string.
    const ASCII_CHARS = '@%#*+=-:~-.` ';
    const CYRILLIC_CHARS = 'ЖЩШБЮЭЫЪЯмрпдлокесвтцух-:. ';

    let charSet = customChars;
    if (!charSet) {
        charSet = alphabet.toLowerCase() === 'cyrillic' ? CYRILLIC_CHARS : ASCII_CHARS;
    }
    const charSetLength = charSet.length;

    // 2. Set up a canvas for downsampling the image
    const aspectRatio = originalImg.height / originalImg.width;
    // Adjust height based on character aspect ratio to prevent a stretched look.
    // A common monospace font character has a width/height ratio of about 0.5-0.6.
    const charAspectRatio = 0.5;
    const height = Math.round(width * aspectRatio * charAspectRatio);

    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // 3. Draw the image onto the small canvas. This resizes the image and averages
    // pixel colors, which is a fast way to downsample.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 4. Get pixel data and build the resulting text string
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;
    let resultText = '';

    for (let y = 0; y < height; y++) {
        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];

            // Convert the pixel color to a single brightness value (grayscale)
            // using the standard luminosity formula.
            const brightness = (0.299 * r + 0.587 * g + 0.114 * b);

            // Invert brightness if the flag is set
            const finalBrightness = shouldInvert ? (255 - brightness) : brightness;

            // Map the brightness value (0-255) to a character in our set.
            const charIndex = Math.floor((finalBrightness / 255) * (charSetLength - 1));
            resultText += charSet.charAt(charIndex);
        }
        resultText += '\n';
    }

    // 5. Create a <pre> element to display the result with a monospace font
    // This ensures that all characters have the same width for a grid-like appearance.
    const pre = document.createElement('pre');
    pre.textContent = resultText;
    pre.style.fontFamily = '"Courier New", Courier, monospace';
    pre.style.lineHeight = '0.9em'; // Use a tight line height for a cohesive image
    pre.style.fontSize = '10px';    // A reasonable default font size
    pre.style.margin = '0';
    pre.style.display = 'inline-block'; // Ensures the element's box fits its content
    pre.style.color = '#000';
    pre.style.backgroundColor = '#fff';

    return pre;
}