Please bookmark this page to avoid losing your image tool!

Image Link Translator And Alphabet Coder

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
/**
 * 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;
    }
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Link Translator And Alphabet Coder is an online tool designed to process images in two distinct ways: converting them into Base64 encoded Data URLs that can be used as self-contained ‘links’ or transforming the visual information of the image into text art using a customized set of characters. This tool is useful for web developers who need to embed images directly into web pages or applications without hosting them separately, as well as for creative individuals looking to produce ASCII art representations of their images. Users can adjust the level of detail in the text art and select different character sets to achieve various visual effects.

Leave a Reply

Your email address will not be published. Required fields are marked *