Image Alphabet Translator Analyzer

/**
 * Converts an image into a text-based representation (ASCII/character art).
 * It analyzes the brightness of different parts of the image and replaces them
 * with characters from a specified alphabet.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @param {string} alphabet A string of characters to use for the conversion, ordered from darkest to lightest. The function maps dark areas of the image to the beginning of the string and light areas to the end.
 * @param {number} fontSize The size of the font, which also determines the resolution or "cell size" of the analysis grid. Larger fonts mean lower resolution.
 * @param {string} fontColor The color of the characters in CSS format (e.g., '#000000', 'black').
 * @param {string} backgroundColor The background color of the output canvas.
 * @returns {HTMLCanvasElement} A canvas element with the resulting character art drawn on it.
 */
function processImage(originalImg, alphabet = '@%#*+=-:. ', fontSize = 10, fontColor = '#000000', backgroundColor = '#ffffff') {
    // 1. Sanitize parameters
    const step = Math.max(1, parseInt(fontSize, 10) || 10);
    const chars = alphabet.split('');
    const numChars = chars.length;

    // 2. Create a temporary canvas to analyze the original image's pixel data
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d', {
        willReadFrequently: true
    });
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;
    tempCanvas.width = imgWidth;
    tempCanvas.height = imgHeight;
    tempCtx.drawImage(originalImg, 0, 0);

    // 3. Create the output canvas
    const outputCanvas = document.createElement('canvas');
    const outputCtx = outputCanvas.getContext('2d');
    outputCanvas.width = imgWidth;
    outputCanvas.height = imgHeight;

    // 4. Prepare the output canvas for drawing
    outputCtx.fillStyle = backgroundColor;
    outputCtx.fillRect(0, 0, outputCanvas.width, outputCanvas.height);
    outputCtx.fillStyle = fontColor;
    outputCtx.font = `${step}px monospace`; // Monospace font is crucial for alignment
    outputCtx.textAlign = 'center';
    outputCtx.textBaseline = 'middle';

    // Handle edge case of an empty alphabet
    if (numChars === 0) {
        return outputCanvas; // Return a blank canvas
    }

    // 5. Iterate through the image in grid cells
    for (let y = 0; y < imgHeight; y += step) {
        for (let x = 0; x < imgWidth; x += step) {
            // Get the pixel data for the current cell
            const imageData = tempCtx.getImageData(x, y, step, step);
            const data = imageData.data;
            let totalBrightness = 0;
            let pixelCount = 0;

            // Calculate the average brightness of the cell
            for (let k = 0; k < data.length; k += 4) {
                const r = data[k];
                const g = data[k + 1];
                const b = data[k + 2];
                // Use the standard luminosity formula for more accurate perceived brightness
                const brightness = 0.2126 * r + 0.7152 * g + 0.0722 * b;
                totalBrightness += brightness;
                pixelCount++;
            }

            const averageBrightness = pixelCount > 0 ? totalBrightness / pixelCount : 0;

            // 6. Map the brightness (0-255) to a character in the alphabet
            // The default alphabet is ordered from darkest ('@') to lightest (' ').
            // A low brightness (dark area) should map to a low index.
            // A high brightness (light area) should map to a high index.
            const charIndex = Math.floor((averageBrightness / 255) * (numChars - 1));
            const char = chars[chars.length - 1 - charIndex];

            // 7. Draw the character onto the output canvas
            if (char) {
                // Center the character within its grid cell
                outputCtx.fillText(char, x + step / 2, y + step / 2);
            }
        }
    }

    // 8. Return the final canvas
    return outputCanvas;
}