Image To ASCII Language Code Converter

/**
 * Converts an image into an ASCII art representation.
 *
 * @param {Image} originalImg The original Image object to be converted.
 * @param {number} [maxWidth=100] The maximum width of the resulting ASCII art in characters. The height is adjusted to maintain the aspect ratio.
 * @param {string} [charSet='@#S%?*+;:,.''] The set of characters to use for rendering, ordered from darkest to lightest.
 * @param {number} [invert=0] If set to 1, the character set mapping will be inverted (light pixels get dark characters).
 * @param {number} [contrast=0] A value from -100 to 100 to adjust the image contrast before conversion. 0 means no change.
 * @returns {HTMLElement} A <pre> element containing the generated ASCII art.
 */
function processImage(originalImg, maxWidth = 100, charSet = '@#S%?*+;:,.' , invert = 0, contrast = 0) {
    // 1. Create an in-memory canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // 2. Calculate the new dimensions of the canvas
    // We adjust the height to compensate for the character aspect ratio (characters are taller than they are wide)
    const aspectRatio = originalImg.width / originalImg.height;
    const characterAspectRatio = 0.5; // Heuristic for monospaced character width-to-height ratio
    const newWidth = parseInt(maxWidth, 10) || 100;
    const newHeight = Math.round(newWidth / aspectRatio * characterAspectRatio);

    canvas.width = newWidth;
    canvas.height = newHeight;

    // 3. Draw the resized image onto the canvas
    ctx.drawImage(originalImg, 0, 0, newWidth, newHeight);

    // 4. Get the image data from the canvas
    const imageData = ctx.getImageData(0, 0, newWidth, newHeight);
    const data = imageData.data;

    // 5. Prepare the character set
    let finalCharSet = String(charSet);
    if (Number(invert) === 1) {
        finalCharSet = finalCharSet.split('').reverse().join('');
    }
    const numChars = finalCharSet.length;

    // Helper function to apply contrast adjustment to a single color channel value
    const applyContrast = (value, contrastValue) => {
        const factor = (259 * (contrastValue + 255)) / (255 * (259 - contrastValue));
        let newValue = factor * (value - 128) + 128;
        // Clamp the value to the valid 0-255 range
        return Math.max(0, Math.min(255, newValue));
    };

    const contrastValue = Number(contrast);
    
    // 6. Iterate over the pixels and build the ASCII string
    let asciiString = '';
    for (let y = 0; y < newHeight; y++) {
        for (let x = 0; x < newWidth; x++) {
            const i = (y * newWidth + x) * 4;
            let r = data[i];
            let g = data[i + 1];
            let b = data[i + 2];
            // alpha is data[i + 3], we ignore it for this purpose

            // Apply contrast if specified
            if (contrastValue !== 0) {
                r = applyContrast(r, contrastValue);
                g = applyContrast(g, contrastValue);
                b = applyContrast(b, contrastValue);
            }
            
            // Calculate pixel brightness using the luminosity formula
            // and normalize to a 0-1 range
            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
            
            // Map the brightness to a character from the character set
            const charIndex = Math.floor(brightness * numChars);
            const char = finalCharSet.charAt(Math.min(charIndex, numChars - 1));
            
            asciiString += char;
        }
        asciiString += '\n';
    }
    
    // 7. Create a <pre> element to display the result, preserving whitespace and using a monospaced font
    const preElement = document.createElement('pre');
    preElement.textContent = asciiString;
    
    // Apply styles for proper an aesthetic display of ASCII art
    preElement.style.fontFamily = 'monospace, "Courier New", Courier';
    preElement.style.fontSize = '8px';
    preElement.style.lineHeight = '1.0';
    preElement.style.letterSpacing = '0.5px';
    preElement.style.margin = '0';
    preElement.style.display = 'inline-block';
    
    return preElement;
}