Image Text Creation Tool Powered By AI

/**
 * Creates a text-based artistic representation of an image, simulating an "AI-powered" text creator.
 * The core of this "AI" is an algorithm that intelligently maps the brightness and color of image regions
 * to a corresponding set of characters, generating a piece of "text art".
 *
 * @param {Image} originalImg The source HTML Image object.
 * @param {number} [scale=0.07] A number to control the output resolution. Smaller values (e.g., 0.05) create a larger, more detailed text image. Larger values (e.g., 0.5) create a smaller, more abstract one.
 * @param {string} [charset="█▇▆▅▄▃▂  "] The set of characters for rendering, ordered from visually densest to sparsest. The algorithm maps bright image areas to dense characters and dark areas to sparse ones.
 * @param {string} [colored='true'] A string ('true' or 'false') to determine if the output should be colored using the original image's pixel colors.
 * @param {string} [bgColor='black'] The background color for the output element.
 * @param {number} [fontSize=7] The font size in pixels for the output text. This affects the final dimensions of the art.
 * @returns {HTMLElement} A <pre> element containing the generated text art, which can be directly appended to the document.
 */
function processImage(originalImg, scale = 0.07, charset = "█▇▆▅▄▃▂  ", colored = 'true', bgColor = 'black', fontSize = 7) {

    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } can optimize repeated getImageData calls in some browsers.
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    // 1. Calculate the dimensions of the text grid based on the scale factor.
    // Ensure the grid is at least 1x1.
    const gridWidth = Math.max(1, Math.floor(originalImg.width * scale));
    const gridHeight = Math.max(1, Math.floor(originalImg.height * scale * 0.5)); // Adjust for character aspect ratio (fonts are taller than they are wide)

    canvas.width = gridWidth;
    canvas.height = gridHeight;

    // 2. Draw the image onto the canvas, downscaled to the grid dimensions.
    // The browser's scaling algorithm provides a form of anti-aliasing,
    // which effectively averages the colors of the pixels in each grid cell.
    ctx.drawImage(originalImg, 0, 0, gridWidth, gridHeight);

    const imageData = ctx.getImageData(0, 0, gridWidth, gridHeight).data;
    const outputElement = document.createElement('pre');

    // 3. Style the output element to ensure characters form a cohesive grid.
    outputElement.style.fontFamily = "'Courier New', Courier, monospace";
    outputElement.style.fontWeight = 'bold';
    outputElement.style.lineHeight = '0.8em'; // Squeeze lines to reduce vertical gaps
    outputElement.style.letterSpacing = '0';
    outputElement.style.fontSize = `${fontSize}px`;
    outputElement.style.backgroundColor = bgColor;
    outputElement.style.display = 'inline-block';
    outputElement.style.margin = '0'; // Remove default pre margin
    outputElement.style.padding = '1em'; // Add some padding

    const useColor = (String(colored).toLowerCase() === 'true');
    let content = '';

    // 4. Iterate over each "pixel" of the downscaled grid.
    for (let y = 0; y < gridHeight; y++) {
        for (let x = 0; x < gridWidth; x++) {
            const i = (y * gridWidth + x) * 4;
            const r = imageData[i];
            const g = imageData[i + 1];
            const b = imageData[i + 2];
            // imageData[i + 3] is the alpha channel, which we ignore here.

            // 5. Convert the pixel color to a single brightness value (0-1) using the standard luminance formula.
            const brightness = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;

            // 6. Map the brightness to a character in the charset.
            // On a dark background, bright parts of the image should use dense characters,
            // and dark parts should use sparse characters. So we invert the brightness for mapping.
            const charIndex = Math.floor((1 - brightness) * (charset.length - 1));
            const char = charset.charAt(charIndex) || '&nbsp;';
            

            if (useColor) {
               // For colored output, wrap each character in a span with its own color.
               // Escape HTML-sensitive characters and handle spaces.
                const safeChar = char === ' ' ? '&nbsp;' : char.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
                content += `<span style='color:rgb(${r},${g},${b})'>${safeChar}</span>`;
            } else {
                // For monochrome, just append the character.
                content += char;
            }
        }
        content += '\n'; // Newline after each row.
    }

    // 7. Set the content and return the final element.
    if (useColor) {
        outputElement.innerHTML = content;
    } else {
        // For monochrome, the text color should contrast with the background.
        // We'll choose a simple contrasting default (white for dark BGs, black for light BGs).
        const bgHex = bgColor.startsWith('#') ? bgColor : '#000000'; // Fallback for non-hex colors
        const bgR = parseInt(bgHex.slice(1, 3), 16);
        const bgG = parseInt(bgHex.slice(3, 5), 16);
        const bgB = parseInt(bgHex.slice(5, 7), 16);
        const bgLuminance = (bgR + bgG + bgB) / 3;
        outputElement.style.color = bgLuminance < 128 ? 'white' : 'black';
        outputElement.textContent = content;
    }

    return outputElement;
}