Image Link Translator And Alphabet Coder

/**
 * Processes an image to either convert it into a Data URL ("link") or into text art ("alphabet code").
 * This function interprets "Image Link Translator" as converting an image to a self-contained data link,
 * and "Alphabet Coder" as encoding the image's visual information into text using a given set of characters.
 *
 * @param {Image} originalImg The original Image object to process.
 * @param {string} [mode='text'] The operation mode. Can be 'link' or 'text'. 'link' converts the image to a Data URL. 'text' converts it to text art.
 * @param {string} [alphabet=' .:-=+*#%@'] The string of characters for text art, ordered from lightest to darkest.
 * @param {number} [resolution=0.3] A number between 0 and 1 that controls the detail level (output size) of the text art. Higher is more detailed.
 * @returns {HTMLElement} A displayable HTML element containing the result.
 */
function processImage(originalImg, mode = 'text', alphabet = ' .:-=+*#%@', resolution = 0.3) {
    if (mode !== 'text' && mode !== 'link') {
        mode = 'text'; // Fallback to a default mode if an invalid one is provided.
    }

    // ----- MODE: 'link' -----
    // Converts the image into a Base64 encoded Data URL, which acts as a self-contained "link".
    if (mode === 'link') {
        const canvas = document.createElement('canvas');
        canvas.width = originalImg.naturalWidth;
        canvas.height = originalImg.naturalHeight;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0);

        const dataURL = canvas.toDataURL();

        const container = document.createElement('div');
        container.style.fontFamily = 'Arial, sans-serif';
        container.style.padding = '1em';
        container.style.maxWidth = '100vw'; // Use viewport width for max
        container.style.boxSizing = 'border-box';

        const title = document.createElement('h3');
        title.innerText = 'Image Data URL ("Link")';
        title.style.margin = '0 0 0.5em 0';
        container.appendChild(title);

        const description = document.createElement('p');
        description.innerText = 'The following is a self-contained "link" for your image, encoded using Base64. You can use it directly in HTML or CSS.';
        description.style.margin = '0 0 1em 0';
        description.style.fontSize = '0.9em';
        container.appendChild(description);

        const textArea = document.createElement('textarea');
        textArea.value = dataURL;
        textArea.style.width = '100%';
        textArea.style.minHeight = '120px';
        textArea.style.padding = '10px';
        textArea.style.border = '1px solid #ccc';
        textArea.style.borderRadius = '4px';
        textArea.style.resize = 'vertical';
        textArea.style.wordBreak = 'break-all';
        textArea.style.boxSizing = 'border-box';
        textArea.readOnly = true;
        textArea.addEventListener('focus', (e) => e.target.select());
        container.appendChild(textArea);

        return container;
    }

    // ----- MODE: 'text' -----
    // Converts the image into text art using the provided character set ("alphabet").
    if (mode === 'text') {
        // --- Parameter Validation & Setup ---
        const validAlphabet = (typeof alphabet === 'string' && alphabet.length > 0) ? alphabet : ' .:-=+*#%@';
        let res = (typeof resolution === 'number' && resolution > 0) ? resolution : 0.3;
        if (res > 1) res = 1;

        // --- Calculate Dimensions for Text Art ---
        const FONT_ASPECT_RATIO = 0.55; // Empiric value for monospace fonts' width/height ratio
        const MAX_WIDTH = 200; // Max characters per line to avoid performance issues and large outputs

        let targetWidth = Math.floor(originalImg.naturalWidth * res);
        if (targetWidth > MAX_WIDTH) {
            targetWidth = MAX_WIDTH;
        }

        const imageAspectRatio = originalImg.naturalHeight / originalImg.naturalWidth;
        let targetHeight = Math.floor(targetWidth * imageAspectRatio * FONT_ASPECT_RATIO);

        targetWidth = Math.max(1, targetWidth);
        targetHeight = Math.max(1, targetHeight);

        // --- Canvas Processing ---
        const canvas = document.createElement('canvas');
        canvas.width = targetWidth;
        canvas.height = targetHeight;
        const ctx = canvas.getContext('2d');

        // Drawing onto the small canvas averages the pixel colors
        ctx.drawImage(originalImg, 0, 0, targetWidth, targetHeight);

        const imageData = ctx.getImageData(0, 0, targetWidth, targetHeight);
        const data = imageData.data;
        let textArt = '';
        const alphabetLength = validAlphabet.length - 1;

        for (let y = 0; y < targetHeight; y++) {
            for (let x = 0; x < targetWidth; x++) {
                const i = (y * targetWidth + x) * 4;
                const r = data[i],
                    g = data[i + 1],
                    b = data[i + 2];

                // Calculate brightness using the luminance formula for perceptual accuracy
                const brightness = 0.2126 * r + 0.7152 * g + 0.0722 * b;

                // Map brightness (0-255) to an alphabet character.
                // The alphabet is ordered light to dark.
                // A high brightness value maps to a low index (light character).
                // A low brightness value maps to a high index (dark character).
                const charIndex = Math.round((brightness / 255) * alphabetLength);
                textArt += validAlphabet[alphabetLength - charIndex] || validAlphabet[validAlphabet.length - 1];
            }
            textArt += '\n';
        }

        // --- Create a displayable element ---
        const preElement = document.createElement('pre');
        preElement.textContent = textArt;
        preElement.style.fontFamily = 'monospace, "Courier New", Courier';
        preElement.style.fontSize = '10px';
        preElement.style.lineHeight = '1.0';
        preElement.style.letterSpacing = '1px';
        preElement.style.margin = '0';
        preElement.style.padding = '1em';
        preElement.style.backgroundColor = '#f4f4f4';
        preElement.style.color = '#333';
        preElement.style.border = '1px solid #ccc';
        preElement.style.borderRadius = '4px';
        preElement.style.overflow = 'auto';

        return preElement;
    }
}