Image Programming Language Translator For Alphabet

function processImage(originalImg, resolution = 8, alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', fontSize = 8, fontFamily = 'monospace', backgroundColor = 'white', textColor = 'black') {
    // Validate parameters to prevent errors
    const safeResolution = Math.max(1, Math.floor(resolution));
    const safeAlphabet = (alphabet && alphabet.length > 0) ? alphabet : ' ';
    const alphabetLength = safeAlphabet.length;

    // Create an in-memory canvas to draw the image and access its pixel data
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } is a performance hint for frequent getImageData calls
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    // Use naturalWidth/Height to get the original image dimensions, unaffected by CSS
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    ctx.drawImage(originalImg, 0, 0);

    let imageData;
    try {
        // This can fail if the image is cross-origin
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Could not get image data due to a Cross-Origin (CORS) issue.", e);
        const errorEl = document.createElement('pre');
        errorEl.textContent = "Error: Could not process the image due to a security restriction (CORS).\nPlease use an image from the same domain.";
        errorEl.style.color = 'red';
        return errorEl;
    }
    const data = imageData.data;

    let resultText = '';
    // Iterate over the image in blocks determined by the resolution
    for (let y = 0; y < canvas.height; y += safeResolution) {
        let line = '';
        for (let x = 0; x < canvas.width; x += safeResolution) {
            // Get the pixel index for the top-left of the current block
            const i = (y * canvas.width + x) * 4;

            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];

            // Calculate the brightness of the pixel using the luminosity formula (0-255)
            const brightness = 0.299 * r + 0.587 * g + 0.114 * b;

            // Map the brightness value to a character in the provided alphabet.
            // Dark pixels (brightness 0) map to the first character.
            // Bright pixels (brightness 255) map to the last character.
            const charIndex = Math.floor((brightness / 255) * (alphabetLength - 1));

            line += safeAlphabet[charIndex];
        }
        resultText += line + '\n';
    }

    // Create a <pre> element to display the result, which respects whitespace
    const pre = document.createElement('pre');
    pre.textContent = resultText;

    // Apply styling for correct visual representation
    pre.style.fontFamily = fontFamily;
    pre.style.fontSize = `${fontSize}px`;
    pre.style.color = textColor;
    pre.style.backgroundColor = backgroundColor;
    pre.style.lineHeight = '1em'; // Use 'em' to scale with font size
    pre.style.letterSpacing = '0.05em';
    pre.style.margin = '0'; // Remove default browser margins
    pre.style.overflow = 'auto'; // Add scrollbars if content is too large

    return pre;
}