Image Alphabet Translator For MS Paint

async function processImage(originalImg, textToTranslate = 'MS PAINT', fontSize = 32, textColor = '#000000', x = 10, y = 10) {

    /**
     * This sprite sheet contains the alphabet characters.
     * Each character is 32x32 pixels. The sheet has 12 columns.
     * It's embedded as a Base64 string to avoid external dependencies.
     */
    const spriteSheetBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAADACAYAAACu/VMEAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAABgKADAAQAAAABAAAAwAAAAACApSP3AAAEVklEQVR4AezdMY7bMBRFUXd8yR5rL5EHCOEQIsYBFskR4iCES9wJ9sgPmM+J0V57+dJKAoHgc/2qZNu2bdv253u/dwCAY+0bWwB0aQEAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAw7gcAgPF+0gYAgHELAAAWvQFgAFgAAGBcAgBgXAIANGgBAEjYAgCw5A0AA+0bWwB0aQEAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BAFzyBv62bdu2bX9+eN7vAQD0bQEAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQAwLgEAMC4BADAuAQBgXAJg3e/y+38A5+5LAwAAAABJRU5ErkJggg==';

    // Create the character map based on the sprite sheet layout.
    const charMap = {};
    const sWidth = 32;  // Source width of a character in the sprite sheet
    const sHeight = 32; // Source height of a character in the sprite sheet
    const columns = 12;

    const charRows = [
        'ABCDEFGHIJ',
        'KLMNOPQRST',
        'UVWXYZ.,!?',
        '0123456789',
        '\'"()+-*/=',
        '<>[]{}%&@#',
        '$_^|~\\;'
    ];

    charRows.forEach((row, rowIndex) => {
        row.split('').forEach((char, colIndex) => {
            charMap[char] = {
                x: colIndex * sWidth,
                y: rowIndex * sHeight
            };
        });
    });

    // Create the main canvas and draw the background image
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    // Asynchronously load the sprite sheet image from the Base64 string
    const spriteSheetImg = new Image();
    const loadPromise = new Promise(resolve => {
        spriteSheetImg.onload = resolve;
        spriteSheetImg.onerror = () => resolve(); // Cntinue even if loading fails
    });
    spriteSheetImg.src = spriteSheetBase64;
    await loadPromise;

    // Create a reusable off-screen canvas for coloring individual characters
    const charCanvas = document.createElement('canvas');
    charCanvas.width = fontSize;
    charCanvas.height = fontSize;
    const charCtx = charCanvas.getContext('2d', { willReadFrequently: true });

    // Loop through the input text and draw each character onto the main canvas
    let currentX = parseInt(x, 10);
    let currentY = parseInt(y, 10);
    const text = textToTranslate.toUpperCase();

    for (const char of text) {
        if (char === '\n') {
            currentY += fontSize;
            currentX = parseInt(x, 10);
            continue;
        }

        if (char === ' ') {
            currentX += fontSize;
            continue;
        }

        const mapping = charMap[char];
        if (mapping) {
            // Clear the character canvas for the new character
            charCtx.clearRect(0, 0, fontSize, fontSize);

            // Draw the character from the sprite sheet onto the off-screen canvas
            charCtx.drawImage(spriteSheetImg, mapping.x, mapping.y, sWidth, sHeight, 0, 0, fontSize, fontSize);

            // Apply the specified text color using a composite operation
            charCtx.globalCompositeOperation = 'source-in';
            charCtx.fillStyle = textColor;
            charCtx.fillRect(0, 0, fontSize, fontSize);
            charCtx.globalCompositeOperation = 'source-over'; // Reset for next draw

            // Draw the colored character from the off-screen canvas to the main canvas
            ctx.drawImage(charCanvas, currentX, currentY);

            // Move the cursor for the next character
            currentX += fontSize;
        }
        // Characters not found in the map are simply skipped
    }

    // Return the final composited canvas
    return canvas;
}