Image To ASCII Text Art Converter With Copy & Paste Feature

/**
 * Converts an image to ASCII text art and presents it in a pre-formatted element.
 *
 * @param {Image} originalImg The source image object to convert.
 * @param {number} maxWidth The desired width of the ASCII art in characters. The height is calculated based on the image's aspect ratio. The value is capped at 999. Defaults to 120.
 * @param {string} charRamp A string of characters to use for mapping brightness levels, ordered from darkest representation to lightest. Defaults to a detailed 70-level ramp.
 * @param {string} invert A string ('true' or 'false') indicating whether to invert the brightness mapping. If 'true', light areas of the image will be represented by dark characters. Defaults to 'false'.
 * @returns {HTMLElement} A <pre> element containing the generated ASCII art, styled for proper display and easy copying.
 */
function processImage(originalImg, maxWidth = 120, charRamp = `$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/|()1{}[]?-_+~<>i!lI;:,"^ harnessing\`'. `, invert = 'false') {
    // 1. Setup Canvas and context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // 2. Calculate dimensions for the ASCII art
    // Character aspect ratio correction factor (monospace fonts are taller than wide)
    const aspectRatioCorrection = 0.5;
    const originalAspect = originalImg.height / originalImg.width;
    
    const charWidth = Math.min(parseInt(maxWidth, 10) || 120, 999);
    const charHeight = Math.round(charWidth * originalAspect * aspectRatioCorrection);

    canvas.width = charWidth;
    canvas.height = charHeight;

    // 3. Draw the downscaled image to the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // 4. Prepare the character ramp
    let finalCharRamp = charRamp;
    const shouldInvert = invert.toString().toLowerCase() === 'true';
    if (shouldInvert) {
      finalCharRamp = charRamp.split('').reverse().join('');
    }
    const rampLength = finalCharRamp.length;

    // 5. Generate the ASCII string
    let asciiString = '';
    for (let y = 0; y < charHeight; y++) {
        for (let x = 0; x < charWidth; x++) {
            const offset = (y * charWidth + x) * 4;
            const r = data[offset];
            const g = data[offset + 1];
            const b = data[offset + 2];
            
            // Using the luminosity method for a more perceptually accurate grayscale conversion
            const brightness = 0.2126 * r + 0.7152 * g + 0.0722 * b;

            // Map brightness (0-255) to a character in the ramp
            const charIndex = Math.floor((brightness / 255) * (rampLength - 1));
            asciiString += finalCharRamp.charAt(charIndex);
        }
        asciiString += '\n'; // Newline character at the end of each row
    }

    // 6. Create and style the output element for display
    const preElement = document.createElement('pre');
    preElement.textContent = asciiString;
    
    // Apply styles for a good visual representation and easy copy-pasting
    preElement.style.fontFamily = 'monospace, "Courier New", Courier';
    preElement.style.fontSize = '10px';
    preElement.style.lineHeight = '0.9em';
    preElement.style.letterSpacing = '0.05em';
    preElement.style.margin = '0';
    preElement.style.padding = '1em';
    preElement.style.border = '1px solid #ccc';
    preElement.style.display = 'inline-block';
    preElement.style.backgroundColor = '#f8f8f8';
    preElement.style.color = '#333';
    preElement.style.whiteSpace = 'pre';

    return preElement;
}