Image Alphabet Painter

/**
 * Paints an image using characters from a specified alphabet.
 * Each character is colored based on the corresponding area in the original image.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {string} [alphabet='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'] A string of characters to use for painting the image.
 * @param {number} [fontSize=10] The font size of the characters. This also determines the resolution of the output.
 * @param {string} [backgroundColor='#FFFFFF'] The background color of the output canvas, in a CSS-compatible format.
 * @returns {HTMLCanvasElement} A new canvas element with the image rendered using alphabet characters.
 */
function processImage(originalImg, alphabet, fontSize, backgroundColor) {
    // 1. Set default values for parameters and parse them
    const chars = alphabet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#%&*.+=-_';
    const size = Number(fontSize) || 10;
    const bgColor = backgroundColor || '#FFFFFF';

    // Ensure the size is at least 1px to avoid infinite loops or errors
    const charSize = Math.max(1, size);

    const originalWidth = originalImg.width;
    const originalHeight = originalImg.height;

    // 2. Create a temporary canvas to get pixel data from the original image
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = originalWidth;
    tempCanvas.height = originalHeight;
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
    tempCtx.drawImage(originalImg, 0, 0);
    
    let imageData;
    try {
        // Attempt to get the pixel data from the entire canvas
        imageData = tempCtx.getImageData(0, 0, originalWidth, originalHeight).data;
    } catch (e) {
        // Handle potential security errors (tainted canvas from cross-origin image)
        console.error("Could not get image data from canvas. The image might be from a different origin.", e);
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = originalWidth > 0 ? originalWidth : 400;
        errorCanvas.height = originalHeight > 0 ? originalHeight : 150;
        const errorCtx = errorCanvas.getContext('2d');
        errorCtx.font = '16px Arial';
        errorCtx.fillStyle = 'red';
        errorCtx.textAlign = 'center';
        errorCtx.textBaseline = 'middle';
        errorCtx.fillText('Error: Could not process image.', errorCanvas.width / 2, errorCanvas.height / 2 - 10);
        errorCtx.fillText('It may be from a different website (cross-origin).', errorCanvas.width / 2, errorCanvas.height / 2 + 10);
        return errorCanvas;
    }

    // 3. Create the final output canvas
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = originalWidth;
    outputCanvas.height = originalHeight;
    const outputCtx = outputCanvas.getContext('2d');

    // 4. Fill the background of the output canvas
    outputCtx.fillStyle = bgColor;
    outputCtx.fillRect(0, 0, originalWidth, originalHeight);

    // 5. Configure the text properties for drawing
    outputCtx.font = `${charSize}px monospace`;
    outputCtx.textAlign = 'center';
    outputCtx.textBaseline = 'middle';

    // 6. Iterate through the image in a grid pattern defined by the character size
    let charIndex = 0;
    for (let y = 0; y < originalHeight; y += charSize) {
        for (let x = 0; x < originalWidth; x += charSize) {
            // Get the pixel color from the center of the current grid cell
            const sampleX = Math.min(Math.floor(x + charSize / 2), originalWidth - 1);
            const sampleY = Math.min(Math.floor(y + charSize / 2), originalHeight - 1);
            const pixelIndex = (sampleY * originalWidth + sampleX) * 4;

            // Get the RGBA values of the sampled pixel
            const r = imageData[pixelIndex];
            const g = imageData[pixelIndex + 1];
            const b = imageData[pixelIndex + 2];
            const a = imageData[pixelIndex + 3];

            // If the pixel is not mostly transparent, draw a character
            if (a > 128) {
                // Get the next character from the alphabet string, looping back to the start
                const character = chars[charIndex % chars.length];
                
                // Set the fill style to the color of the sampled pixel
                outputCtx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
                
                // Draw the character, centered in its grid cell
                outputCtx.fillText(character, x + charSize / 2, y + charSize / 2);
                
                charIndex++;
            }
        }
    }

    // 7. Return the final canvas element
    return outputCanvas;
}