Image Translator And Alphabet Tool

/**
 * Translates an image into a character-based artwork on a canvas.
 * This function processes an image by dividing it into a grid, calculating the
 * average brightness of each cell, and then representing that brightness with a
 * character from a specified "alphabet".
 *
 * @param {Image} originalImg The original Image object to be processed.
 * @param {string} [alphabet=' .,:;irsXA253hMHGS#9B&@'] A string of characters ordered from least dense to most dense, used to represent brightness levels.
 * @param {number} [fontSize=10] The size of each character and its corresponding grid cell in pixels. A smaller number results in a higher resolution.
 * @param {string} [fontColor='#000000'] The color of the characters in a CSS format (e.g., '#RRGGBB', 'black').
 * @param {string} [backgroundColor='#FFFFFF'] The background color of the canvas in a CSS format.
 * @param {number} [invert=0] If set to 1, the brightness-to-character mapping is inverted (light areas get dense characters, dark areas get sparse ones). Default is 0 (dark areas get dense characters).
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves with a canvas element containing the character-based artwork.
 */
async function processImage(originalImg, alphabet = ' .,:;irsXA253hMHGS#9B&@', fontSize = 10, fontColor = '#000000', backgroundColor = '#FFFFFF', invert = 0) {
    // Ensure fontSize is a positive number
    fontSize = Math.max(1, fontSize);

    // Create a temporary canvas to get pixel data from the original image
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = originalImg.naturalWidth;
    tempCanvas.height = originalImg.naturalHeight;
    tempCtx.drawImage(originalImg, 0, 0);
    const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
    const data = imageData.data;

    // Create the final output canvas
    const outputCanvas = document.createElement('canvas');
    const outputCtx = outputCanvas.getContext('2d');
    outputCanvas.width = originalImg.naturalWidth;
    outputCanvas.height = originalImg.naturalHeight;

    // Set up the drawing style for the output canvas
    outputCtx.fillStyle = backgroundColor;
    outputCtx.fillRect(0, 0, outputCanvas.width, outputCanvas.height);
    outputCtx.fillStyle = fontColor;
    outputCtx.font = `${fontSize}px monospace`;
    outputCtx.textAlign = 'center';
    outputCtx.textBaseline = 'middle';

    // Iterate over the image in a grid pattern defined by fontSize
    for (let y = 0; y < tempCanvas.height; y += fontSize) {
        for (let x = 0; x < tempCanvas.width; x += fontSize) {
            let totalBrightness = 0;
            let pixelCount = 0;

            // Calculate the average brightness of the pixels in the current grid cell
            for (let cellY = 0; cellY < fontSize; cellY++) {
                for (let cellX = 0; cellX < fontSize; cellX++) {
                    const currentX = x + cellX;
                    const currentY = y + cellY;

                    if (currentX < tempCanvas.width && currentY < tempCanvas.height) {
                        const pixelIndex = (currentY * tempCanvas.width + currentX) * 4;
                        const r = data[pixelIndex];
                        const g = data[pixelIndex + 1];
                        const b = data[pixelIndex + 2];
                        // Using the luminosity formula for more accurate brightness perception
                        const brightness = (0.299 * r + 0.587 * g + 0.114 * b);
                        totalBrightness += brightness;
                        pixelCount++;
                    }
                }
            }

            const avgBrightness = pixelCount > 0 ? totalBrightness / pixelCount : 0;
            const normalizedBrightness = avgBrightness / 255;

            // Map the brightness value to a character from the alphabet
            const mappingValue = (invert == 1) ? normalizedBrightness : (1 - normalizedBrightness);
            let charIndex = Math.floor(mappingValue * (alphabet.length - 1));
            // Clamp the index to be within the bounds of the alphabet string
            charIndex = Math.max(0, Math.min(alphabet.length - 1, charIndex));
            const char = alphabet[charIndex];

            // Draw the character in the center of the grid cell
            if (char) {
                outputCtx.fillText(char, x + fontSize / 2, y + fontSize / 2);
            }
        }
    }

    return outputCanvas;
}