Image Letter Translator

/**
 * Translates an image into a text-based representation (ASCII art).
 * This function samples pixel blocks from the source image, calculates their
 * brightness, and maps that brightness to a character from a given set.
 *
 * @param {HTMLImageElement} originalImg The source image object.
 * @param {string} [characterSet=' .:-=+*#%@$'] The set of characters to use, ordered from darkest to brightest.
 * @param {number} [resolution=10] The size of the pixel block to sample for each character. Smaller numbers yield higher detail.
 * @param {number} [invert=0] Set to 1 to invert the brightness mapping (e.g., bright pixels become dark characters).
 * @param {number} [contrast=0] Adjusts the contrast. Ranges from -255 to 255.
 * @param {number} [brightness=0] Adjusts the brightness. Ranges from -255 to 255.
 * @returns {HTMLPreElement} A <pre> element containing the generated letter art, styled for proper display.
 */
function processImage(originalImg, characterSet = ' .:-=+*#%@$', resolution = 10, invert = 0, contrast = 0, brightness = 0) {
    // 1. Parameter handling and setup
    const chars = (invert === 1) ? characterSet.split('').reverse().join('') : characterSet;
    const res = Math.max(1, Math.floor(resolution)); // Ensure resolution is a positive integer
    const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));

    // 2. Create canvas and draw the image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    // Scale down very large images to a maximum width to prevent performance issues and overly large text output
    const MAX_WIDTH_CHARS = 200;
    const maxCanvasWidth = MAX_WIDTH_CHARS * res;
    let scale = 1;
    if (originalImg.width > maxCanvasWidth) {
        scale = maxCanvasWidth / originalImg.width;
    }
    canvas.width = originalImg.width * scale;
    canvas.height = originalImg.height * scale;
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 3. Get image pixel data. Handle potential cross-origin errors.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    } catch (e) {
        console.error("Could not get image data. The image might be tainted (from a different origin).", e);
        const errorElement = document.createElement('div');
        errorElement.textContent = "Error: Cannot process image from a different origin due to browser security policies (CORS).";
        errorElement.style.color = 'red';
        errorElement.style.padding = '10px';
        return errorElement;
    }
    const data = imageData.data;

    // 4. Process pixels and build the output string
    let asciiArt = '';
    for (let y = 0; y < canvas.height; y += res) {
        let row = '';
        for (let x = 0; x < canvas.width; x += res) {
            // Get the pixel index (top-left of the current resolution block)
            const i = (Math.floor(y) * canvas.width + Math.floor(x)) * 4;

            // Sample the pixel color
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];

            // Calculate luminance (perceived brightness)
            let gray = 0.299 * r + 0.587 * g + 0.114 * b;

            // Apply contrast and brightness adjustments
            if (contrast !== 0) {
                gray = contrastFactor * (gray - 128) + 128;
            }
            if (brightness !== 0) {
                gray += brightness;
            }

            // Clamp value to the 0-255 range
            gray = Math.max(0, Math.min(255, gray));

            // Map the grayscale value to a character from the set
            const charIndex = Math.floor((gray / 255) * (chars.length - 1));
            const char = chars[charIndex] || ' '; // Fallback to space

            row += char;
        }
        asciiArt += row + '\n';
    }

    // 5. Create, style, and return the final element
    const pre = document.createElement('pre');
    pre.textContent = asciiArt;

    // Apply styles to ensure the text art is displayed correctly
    pre.style.fontFamily = '"Courier New", Courier, monospace';
    pre.style.lineHeight = '0.9em'; // Tighter line height often looks better for ASCII art
    pre.style.fontSize = `${res * 0.9}px`; // Scale font size based on the resolution
    pre.style.display = 'inline-block';
    pre.style.whiteSpace = 'pre';
    pre.style.margin = '0';
    pre.style.padding = '5px';
    pre.style.backgroundColor = '#111';
    pre.style.color = '#eee';

    return pre;
}