Image ASCII Art Generator For Linguistics

function processImage(originalImg, characterSet = "@#&%?*+=-:.' ", resolution = 8, invert = 0, fontColor = '#000000', backgroundColor = '#FFFFFF') {
    // 1. Sanitize inputs & define constants
    const sanitizedResolution = Math.max(1, Math.floor(resolution));
    
    // The character set maps brightness to a character. By default, the first character is for the darkest pixels.
    // If 'invert' is true (1), we reverse the set so the first character is for the lightest pixels.
    const finalCharSet = invert === 1 ? characterSet.split('').reverse().join('') : characterSet;
    
    // Estimated width-to-height ratio of a character in a typical monospace font like Courier New.
    // This is crucial for preserving the image's aspect ratio in the text output.
    const MONOSPACE_FONT_ASPECT_RATIO = 0.6;
    
    // To prevent generating excessively large and slow-to-render text blocks, we cap the output width in characters.
    const MAX_CHARS_WIDTH = 250;

    // 2. Create an off-screen canvas to read image pixel data
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d', {
        willReadFrequently: true
    });

    const originalWidth = originalImg.width;
    const originalHeight = originalImg.height;

    // Draw the image to the canvas at its original size to access pixel data
    canvas.width = originalWidth;
    canvas.height = originalHeight;
    context.drawImage(originalImg, 0, 0, originalWidth, originalHeight);

    // 3. Calculate the dimensions of the sampling grid (the "cell")
    // The width of a cell is determined by the user-defined resolution.
    let cellWidth = sanitizedResolution;

    // If the chosen resolution would result in an output wider than our cap, we increase the cell width to fit.
    if (originalWidth / cellWidth > MAX_CHARS_WIDTH) {
        cellWidth = originalWidth / MAX_CHARS_WIDTH;
    }
    
    // The cell height is adjusted based on the font's aspect ratio. This ensures the final ASCII art is not stretched or squished.
    const cellHeight = cellWidth / MONOSPACE_FONT_ASPECT_RATIO;

    let imageData;
    try {
        imageData = context.getImageData(0, 0, originalWidth, originalHeight);
    } catch (e) {
        console.error("Could not get image data. This may be due to cross-origin restrictions.", e);
        const errorElement = document.createElement('p');
        errorElement.style.color = 'red';
        errorElement.textContent = "Error: Could not process the image. If using an image from another website, please download it and upload it from your computer instead.";
        return errorElement;
    }

    const data = imageData.data;
    let asciiArtStr = '';

    // 4. Iterate over the image, processing one cell at a time
    for (let y = 0; y < originalHeight; y += cellHeight) {
        for (let x = 0; x < originalWidth; x += cellWidth) {
            let totalBrightness = 0;
            let pixelCount = 0;

            // Loop through all pixels within the current cell to find the average brightness
            const blockHeight = Math.ceil(cellHeight);
            const blockWidth = Math.ceil(cellWidth);
            for (let blockY = 0; blockY < blockHeight; blockY++) {
                for (let blockX = 0; blockX < blockWidth; blockX++) {
                    const currentY = Math.floor(y) + blockY;
                    const currentX = Math.floor(x) + blockX;

                    if (currentX < originalWidth && currentY < originalHeight) {
                        const pixelIndex = (currentY * originalWidth + currentX) * 4;
                        const r = data[pixelIndex];
                        const g = data[pixelIndex + 1];
                        const b = data[pixelIndex + 2];
                        
                        // Simple average for brightness calculation (0-255)
                        const brightness = (r + g + b) / 3;
                        totalBrightness += brightness;
                        pixelCount++;
                    }
                }
            }
            const averageBrightness = pixelCount > 0 ? totalBrightness / pixelCount : 0;

            // 5. Map the cell's average brightness to a character from the set
            const charIndex = Math.floor((averageBrightness / 255) * (finalCharSet.length - 1));
            const char = finalCharSet[charIndex];
            asciiArtStr += char;
        }
        asciiArtStr += '\n'; // Add a newline character at the end of each row
    }

    // 6. Create and style the final <pre> element for display
    const preElement = document.createElement('pre');
    preElement.textContent = asciiArtStr;

    // Use a standard monospace font for correct alignment and aspect ratio
    preElement.style.fontFamily = '"Courier New", Courier, monospace';
    preElement.style.margin = '0';
    preElement.style.display = 'inline-block';
    preElement.style.whiteSpace = 'pre';
    preElement.style.color = fontColor;
    preElement.style.backgroundColor = backgroundColor;

    // Use a fixed, small font size for predictable results. The detail is controlled by the number of characters, not the font size.
    preElement.style.fontSize = '8px';
    
    // Tweak line-height and letter-spacing for a denser, more image-like appearance.
    preElement.style.lineHeight = '0.8em';
    preElement.style.letterSpacing = '0.05em';

    return preElement;
}