Image Screen Alphabet Translator

/**
 * This function translates an image into a textual representation using a "screen alphabet"
 * style, similar to ASCII art but designed to look like text on an old digital display.
 * It processes the image in blocks, calculates the average brightness for each block,
 * and maps it to a character from a provided character set. The result is rendered
 * onto a new canvas using a pixel-style font.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {string} charset A string of characters used to represent brightness levels, ordered from darkest to lightest.
 * @param {number} blockSize The size in pixels of each square block to analyze. Smaller values create a more detailed output.
 * @param {string} fontColor A CSS color string for the output text.
 * @param {string} backgroundColor A CSS color string for the output canvas background.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves to a canvas element with the rendered screen alphabet art.
 */
async function processImage(originalImg, charset = '█▓▒░ ', blockSize = 10, fontColor = '#000000', backgroundColor = '#FFFFFF') {
    // 1. Validate parameters
    blockSize = Math.max(1, Math.floor(blockSize));
    if (!charset || charset.length === 0) {
        charset = ' '; // Fallback for invalid charset
    }

    // 2. Dynamically load a pixel-style font for the "Screen Alphabet" aesthetic.
    // "Press Start 2P" is a Google Font that fits the theme perfectly.
    const fontName = 'PressStart2P';
    const fontUrl = 'url(https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2)';
    
    // Check if the font is already available to avoid reloading it.
    if (!document.fonts.check(`1em ${fontName}`)) {
       try {
            const font = new FontFace(fontName, fontUrl);
            await font.load();
            document.fonts.add(font);
        } catch (e) {
            console.error(`Font "${fontName}" failed to load. Falling back to a generic monospace font.`, e);
            // The function will continue using the fallback font specified in the 'font' property below.
        }
    }

    // 3. Create a temporary source canvas to read image pixel data.
    const sourceCanvas = document.createElement('canvas');
    const sourceCtx = sourceCanvas.getContext('2d', { willReadFrequently: true });
    
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    sourceCanvas.width = w;
    sourceCanvas.height = h;

    sourceCtx.drawImage(originalImg, 0, 0);
    const imageData = sourceCtx.getImageData(0, 0, w, h).data;

    // 4. Calculate dimensions for the output character grid.
    const cols = Math.floor(w / blockSize);
    const rows = Math.floor(h / blockSize);

    // 5. Create the final output canvas.
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = cols * blockSize;
    outputCanvas.height = rows * blockSize;
    const outputCtx = outputCanvas.getContext('2d');

    // 6. Set up styles for the output canvas.
    outputCtx.fillStyle = backgroundColor;
    outputCtx.fillRect(0, 0, outputCanvas.width, outputCanvas.height);

    outputCtx.fillStyle = fontColor;
    outputCtx.font = `${blockSize}px ${fontName}, monospace`; // Use loaded font with a fallback.
    outputCtx.textAlign = 'center';
    outputCtx.textBaseline = 'middle';

    // 7. Iterate over the image in blocks, calculate average brightness, and draw the corresponding character.
    for (let j = 0; j < rows; j++) {
        for (let i = 0; i < cols; i++) {
            const x_start = i * blockSize;
            const y_start = j * blockSize;
            let totalBrightness = 0;
            let pixelCount = 0;

            // Analyze all pixels within the current block.
            for (let y = 0; y < blockSize; y++) {
                for (let x = 0; x < blockSize; x++) {
                    const pixelX = x_start + x;
                    const pixelY = y_start + y;

                    if (pixelX < w && pixelY < h) {
                        const pixelIndex = (pixelY * w + pixelX) * 4;
                        const r = imageData[pixelIndex];
                        const g = imageData[pixelIndex + 1];
                        const b = imageData[pixelIndex + 2];
                        
                        // Use the luminosity formula for a more human-perceived grayscale value.
                        const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
                        totalBrightness += brightness;
                        pixelCount++;
                    }
                }
            }

            const avgBrightness = (pixelCount > 0) ? totalBrightness / pixelCount : 0;
            
            // Map the average brightness (0-255) to a character in the provided charset.
            const brightnessPercent = avgBrightness / 255;
            const charIndex = Math.min(
                charset.length - 1,
                Math.floor(brightnessPercent * charset.length)
            );
            const character = charset[charIndex];

            // Draw the character, centered within its grid cell.
            if (character && character.trim() !== '') {
                const drawX = i * blockSize + blockSize / 2;
                const drawY = j * blockSize + blockSize / 2;
                outputCtx.fillText(character, drawX, drawY);
            }
        }
    }

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