Image Language And Code Alphabet Viewer

async function processImage(originalImg, alphabet = "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\\|()1{}[]?-_+~<>i!lI;:,\"^`'. ", blockSize = 8, backgroundColor = 'black', textColor = '') {
    // Create a source canvas to get the pixel data from the original image
    const sourceCanvas = document.createElement('canvas');
    const sourceCtx = sourceCanvas.getContext('2d', {
        willReadFrequently: true
    });
    sourceCanvas.width = originalImg.width;
    sourceCanvas.height = originalImg.height;
    sourceCtx.drawImage(originalImg, 0, 0);

    let imageData;
    try {
        // Attempt to get the image data. This can fail due to CORS policy.
        imageData = sourceCtx.getImageData(0, 0, sourceCanvas.width, sourceCanvas.height);
    } catch (e) {
        console.error("Could not get image data. The image might be from a different origin (CORS policy).", e);
        // Return a canvas with an error message if processing fails
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = originalImg.width > 300 ? originalImg.width : 300;
        errorCanvas.height = originalImg.height > 100 ? originalImg.height : 100;
        const errorCtx = errorCanvas.getContext('2d');
        errorCtx.fillStyle = '#f0f0f0';
        errorCtx.fillRect(0, 0, errorCanvas.width, errorCanvas.height);
        errorCtx.fillStyle = 'red';
        errorCtx.font = '16px sans-serif';
        errorCtx.textAlign = 'center';
        errorCtx.textBaseline = 'middle';
        errorCtx.fillText('Error: Cannot process cross-origin image.', errorCanvas.width / 2, errorCanvas.height / 2);
        return errorCanvas;
    }

    const data = imageData.data;
    const {
        width,
        height
    } = sourceCanvas;

    // Create the result canvas where the final output will be drawn
    const resultCanvas = document.createElement('canvas');
    const resultCtx = resultCanvas.getContext('2d');
    resultCanvas.width = width;
    resultCanvas.height = height;

    // Set the background color of the result canvas
    resultCtx.fillStyle = backgroundColor;
    resultCtx.fillRect(0, 0, width, height);

    // Set font properties. A monospaced font is crucial for proper grid alignment.
    resultCtx.font = `${blockSize}px monospace`;
    resultCtx.textAlign = 'center';
    resultCtx.textBaseline = 'middle';

    // Ensure the alphabet is not empty to avoid errors
    if (alphabet.length === 0) {
        alphabet = ' ';
    }

    // Iterate over the image in blocks of size `blockSize` x `blockSize`
    for (let y = 0; y < height; y += blockSize) {
        for (let x = 0; x < width; x += blockSize) {
            let totalRed = 0,
                totalGreen = 0,
                totalBlue = 0,
                totalBrightness = 0,
                pixelCount = 0;

            // Calculate the average color and brightness for the current block
            for (let blockY = 0; blockY < blockSize; blockY++) {
                for (let blockX = 0; blockX < blockSize; blockX++) {
                    const currentX = x + blockX;
                    const currentY = y + blockY;

                    if (currentX < width && currentY < height) {
                        const i = (currentY * width + currentX) * 4;
                        const r = data[i];
                        const g = data[i + 1];
                        const b = data[i + 2];

                        totalRed += r;
                        totalGreen += g;
                        totalBlue += b;

                        // Calculate brightness using the luminosity method (perceived brightness)
                        totalBrightness += (0.299 * r + 0.587 * g + 0.114 * b);
                        pixelCount++;
                    }
                }
            }

            if (pixelCount === 0) continue;

            const avgBrightness = totalBrightness / pixelCount;

            // Map the average brightness (0-255) to a character in the provided alphabet.
            // The default alphabet is sorted from visually dense to sparse characters.
            // High brightness (light areas) should map to sparse characters (end of the string).
            const charIndex = Math.floor((avgBrightness / 255) * (alphabet.length - 1));
            const char = alphabet[charIndex];

            // Set the fill color for the character
            if (textColor) {
                // Use the user-provided single color if available
                resultCtx.fillStyle = textColor;
            } else {
                // Otherwise, use the average color of the image block
                const avgRed = Math.floor(totalRed / pixelCount);
                const avgGreen = Math.floor(totalGreen / pixelCount);
                const avgBlue = Math.floor(totalBlue / pixelCount);
                resultCtx.fillStyle = `rgb(${avgRed}, ${avgGreen}, ${avgBlue})`;
            }

            // Draw the character, centered within its block
            const centerX = x + blockSize / 2;
            const centerY = y + blockSize / 2;
            resultCtx.fillText(char, centerX, centerY);
        }
    }

    return resultCanvas;
}