Image Identifier Translator From Alphabet

async function processImage(originalImg, alphabet = ' .:-=+*#%@', cellSize = 8, fontFamily = 'monospace', useColor = 0, invert = 0) {
    // Sanitize parameters to ensure they are the correct type and have valid values
    cellSize = Math.max(1, Number(cellSize) || 8);
    useColor = Number(useColor) === 1 ? 1 : 0;
    invert = Number(invert) === 1 ? 1 : 0;
    fontFamily = typeof fontFamily === 'string' && fontFamily.trim() ? fontFamily.trim() : 'monospace';
    alphabet = typeof alphabet === 'string' && alphabet.length > 0 ? alphabet : ' .:-=+*#%@';

    // Dynamically load Google Fonts if specified and not a generic family
    const genericFonts = ['serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui'];
    if (!genericFonts.includes(fontFamily.toLowerCase())) {
        try {
            const fontName = fontFamily.replace(/ /g, '+');
            const fontUrl = `https://fonts.googleapis.com/css2?family=${fontName}:wght@400&display=swap`;
            // Avoid adding duplicate stylesheet links
            if (!document.querySelector(`link[href="${fontUrl}"]`)) {
                const link = document.createElement('link');
                link.rel = 'stylesheet';
                link.href = fontUrl;
                document.head.appendChild(link);
                // Wait for the font to be loaded to avoid rendering with a fallback font
                await document.fonts.load(`${cellSize}px "${fontFamily}"`);
            }
        } catch (e) {
            console.error(`Could not load the font "${fontFamily}". Falling back to monospace.`, e);
            fontFamily = 'monospace';
        }
    }

    // Create canvases and contexts
    const inputCanvas = document.createElement('canvas');
    const outputCanvas = document.createElement('canvas');
    // Using { willReadFrequently: true } is a performance hint for the browser
    const inputCtx = inputCanvas.getContext('2d', { willReadFrequently: true });
    const outputCtx = outputCanvas.getContext('2d');

    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Set canvas dimensions
    inputCanvas.width = width;
    inputCanvas.height = height;
    outputCanvas.width = width;
    outputCanvas.height = height;
    
    // Suggests to the browser how to render the scaled canvas for a crisp, pixelated look
    outputCanvas.style.imageRendering = 'pixelated';
    outputCanvas.style.imageRendering = 'crisp-edges';


    // Draw original image to the input canvas to access its pixel data
    inputCtx.drawImage(originalImg, 0, 0, width, height);

    // Get all pixel data at once for performance
    const allImageData = inputCtx.getImageData(0, 0, width, height);
    const allData = allImageData.data;

    // Set up the output canvas
    outputCtx.fillStyle = '#FFFFFF';
    outputCtx.fillRect(0, 0, width, height);
    outputCtx.font = `${cellSize}px "${fontFamily}"`; // Use quotes for font names with spaces
    outputCtx.textAlign = 'center';
    outputCtx.textBaseline = 'middle';

    // Iterate over the image in sections (cells)
    for (let y = 0; y < height; y += cellSize) {
        for (let x = 0; x < width; x += cellSize) {

            // Calculate the average color and brightness of the current cell
            let totalR = 0, totalG = 0, totalB = 0;
            let pixelCount = 0;

            for (let cellY = 0; cellY < cellSize; cellY++) {
                for (let cellX = 0; cellX < cellSize; cellX++) {
                    const pixelX = x + cellX;
                    const pixelY = y + cellY;

                    if (pixelX < width && pixelY < height) {
                        const i = (pixelY * width + pixelX) * 4;
                        totalR += allData[i];
                        totalG += allData[i + 1];
                        totalB += allData[i + 2];
                        pixelCount++;
                    }
                }
            }

            if (pixelCount === 0) continue;

            const avgR = totalR / pixelCount;
            const avgG = totalG / pixelCount;
            const avgB = totalB / pixelCount;

            // Use the luminance formula for a more accurate grayscale representation
            const brightness = 0.299 * avgR + 0.587 * avgG + 0.114 * avgB;

            // Map the cell's brightness to a character from the provided alphabet
            const maxIndex = alphabet.length - 1;
            let charIndex;
            if (invert === 1) {
                // Inverted: Light areas get characters from the end of the alphabet (e.g., '@')
                charIndex = Math.round((brightness / 255) * maxIndex);
            } else {
                // Default: Dark areas get characters from the end of the alphabet
                charIndex = Math.round(((255 - brightness) / 255) * maxIndex);
            }
            
            const char = alphabet[charIndex];

            // Set the drawing color
            if (useColor === 1) {
                // Use the average color of the pixels in the cell
                outputCtx.fillStyle = `rgb(${Math.round(avgR)}, ${Math.round(avgG)}, ${Math.round(avgB)})`;
            } else {
                // Use black for monochrome output on a white background
                outputCtx.fillStyle = '#000000';
            }

            // Draw the character in the center of the cell
            if (char) {
                const centerX = x + cellSize / 2;
                const centerY = y + cellSize / 2;
                outputCtx.fillText(char, centerX, centerY);
            }
        }
    }

    // Return the final canvas element
    return outputCanvas;
}