Image ASCII Art Name Generator

function processImage(originalImg, text = 'HELLO', fontSize = 10, fontFamily = 'monospace', charSet = '@%#*+=-:. ') {
    // 1. Setup and calculate grid dimensions
    const outputCanvas = document.createElement('canvas');
    const outputCtx = outputCanvas.getContext('2d');

    // Use a temporary context to measure character size accurately for the grid
    outputCtx.font = `${fontSize}px ${fontFamily}`;
    const metrics = outputCtx.measureText('M');
    // For monospaced fonts, width of 'M' is a good approximation for all chars
    const charWidth = metrics.width || (fontSize * 0.6); // Fallback
    const charHeight = fontSize; // Use font size for predictable grid height

    // Calculate how many characters fit into the image dimensions
    const cols = Math.floor(originalImg.width / charWidth);
    const rows = Math.floor(originalImg.height / charHeight);

    // Set final canvas size to match the original image aspect ratio, but aligned to the grid
    outputCanvas.width = cols * charWidth;
    outputCanvas.height = rows * charHeight;

    // 2. Create a scaled-down version of the image for efficient brightness sampling
    const scaledCanvas = document.createElement('canvas');
    scaledCanvas.width = cols;
    scaledCanvas.height = rows;
    const scaledCtx = scaledCanvas.getContext('2d', { willReadFrequently: true });
    
    scaledCtx.drawImage(originalImg, 0, 0, cols, rows);
    const scaledImgData = scaledCtx.getImageData(0, 0, cols, rows).data;

    // 3. Create a low-resolution text mask to determine the shape
    const textMaskCanvas = document.createElement('canvas');
    textMaskCanvas.width = cols;
    textMaskCanvas.height = rows;
    const textMaskCtx = textMaskCanvas.getContext('2d', { willReadFrequently: true });

    // Helper function to find the best font size to fit text within the grid
    const getFitFontSize = (ctx, txt, ff, maxWidth, maxHeight) => {
        let size = maxHeight;
        ctx.font = `${size}px ${ff}`;
        while (ctx.measureText(txt).width > maxWidth && size > 1) {
            size--;
            ctx.font = `${size}px ${ff}`;
        }
        return size;
    };
    
    // Draw the text onto the mask canvas (white text on black background)
    textMaskCtx.fillStyle = 'black';
    textMaskCtx.fillRect(0, 0, cols, rows);
    const fitFontSize = getFitFontSize(textMaskCtx, text, fontFamily, cols, rows);
    textMaskCtx.font = `${fitFontSize}px ${fontFamily}`;
    textMaskCtx.fillStyle = 'white';
    textMaskCtx.textAlign = 'center';
    textMaskCtx.textBaseline = 'middle';
    textMaskCtx.fillText(text, cols / 2, rows / 2);
    
    const textMaskData = textMaskCtx.getImageData(0, 0, cols, rows).data;

    // 4. Generate the final ASCII art on the output canvas
    outputCtx.fillStyle = 'white';
    outputCtx.fillRect(0, 0, outputCanvas.width, outputCanvas.height);
    outputCtx.fillStyle = 'black';
    outputCtx.font = `${fontSize}px ${fontFamily}`;
    outputCtx.textAlign = 'left';
    outputCtx.textBaseline = 'top';
    
    // The charSet should be ordered from dense (for dark areas) to sparse (for light areas).
    // The default value is already in this order.
    for (let y = 0; y < rows; y++) {
        for (let x = 0; x < cols; x++) {
            const i = (y * cols + x) * 4;

            // Check if the current cell is part of the text shape from the mask (is the pixel not black?)
            if (textMaskData[i] > 128) {
                // Get brightness from the corresponding pixel in the scaled image
                const r = scaledImgData[i];
                const g = scaledImgData[i + 1];
                const b = scaledImgData[i + 2];
                // Use the luminosity formula for a more accurate grayscale value
                const brightness = 0.299 * r + 0.587 * g + 0.114 * b;

                // Map the brightness (0-255) to a character index
                // A dark area (low brightness) will map to a low index (dense character like '@')
                // A light area (high brightness) will map to a high index (sparse character like '.')
                const charIndex = Math.floor((brightness / 255) * (charSet.length - 1));
                const char = charSet[charIndex];

                // Draw the selected character onto the final canvas
                if (char) {
                   outputCtx.fillText(char, x * charWidth, y * charHeight);
                }
            }
        }
    }

    // 5. Return the final canvas element
    return outputCanvas;
}