Image Alphabet Drawing And Translation Tool

/**
 * Processes an image by converting it into a text-based representation, similar to ASCII art,
 * and draws this representation onto a new canvas.
 * The brightness of different parts of the image is mapped to characters from a given alphabet.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @param {string} [alphabet='@%#*+=-:. '] A string of characters used for drawing, ordered from densest to sparsest. Darker image areas will use characters from the beginning of the string.
 * @param {number} [resolution=8] The size of the pixel block to sample from the original image for each character. A smaller number means higher detail but slower processing.
 * @param {number} [fontSize=8] The font size in pixels for the characters on the output canvas.
 * @param {string} [fontColor='#000000'] The color of the characters.
 * @param {string} [backgroundColor='#FFFFFF'] The background color of the output canvas.
 * @returns {HTMLCanvasElement} A new canvas element with the image drawn using characters.
 */
async function processImage(originalImg, alphabet = '@%#*+=-:. ', resolution = 8, fontSize = 8, fontColor = '#000000', backgroundColor = '#FFFFFF') {
    // --- 1. Parameter Validation and Sanitization ---
    if (!originalImg || !originalImg.width || !originalImg.height) {
        console.error("Invalid image object provided.");
        const errorCanvas = document.createElement('canvas');
        errorCanvas.width = 200;
        errorCanvas.height = 50;
        const ctx = errorCanvas.getContext('2d');
        ctx.fillStyle = 'red';
        ctx.font = '12px sans-serif';
        ctx.fillText('Error: Invalid Image Input', 10, 30);
        return errorCanvas;
    }

    resolution = Math.max(1, parseInt(resolution, 10) || 8);
    fontSize = Math.max(1, parseInt(fontSize, 10) || 8);
    alphabet = String(alphabet);
    if (alphabet.length === 0) {
        alphabet = '@%#*+=-:. ';
    }
    fontColor = String(fontColor);
    backgroundColor = String(backgroundColor);

    // --- 2. Setup Temporary Canvas to Get Pixel Data ---
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
    tempCanvas.width = originalImg.width;
    tempCanvas.height = originalImg.height;
    tempCtx.drawImage(originalImg, 0, 0);
    const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
    const data = imageData.data;

    // --- 3. Define Output Dimensions ---
    const cols = Math.floor(tempCanvas.width / resolution);
    const rows = Math.floor(tempCanvas.height / resolution);

    // --- 4. Create and Configure Output Canvas ---
    const outputCanvas = document.createElement('canvas');
    const outputCtx = outputCanvas.getContext('2d');

    // To accurately size the canvas, we need to measure a character.
    // 'monospace' font is used for consistent character width.
    const font = `${fontSize}px monospace`;
    outputCtx.font = font;
    const charMetrics = outputCtx.measureText('W'); // A wide character for measurement
    const charWidth = charMetrics.width;
    const charHeight = fontSize; // Font size is a good approximation for row height

    outputCanvas.width = cols * charWidth;
    outputCanvas.height = rows * charHeight;

    // --- 5. Draw background and set text styles ---
    outputCtx.fillStyle = backgroundColor;
    outputCtx.fillRect(0, 0, outputCanvas.width, outputCanvas.height);

    outputCtx.fillStyle = fontColor;
    outputCtx.font = font; // Re-apply font settings as they can be reset
    outputCtx.textAlign = 'center';
    outputCtx.textBaseline = 'middle';

    // --- 6. Process Image Blocks and Draw Characters ---
    for (let y = 0; y < rows; y++) {
        for (let x = 0; x < cols; x++) {
            // Get the coordinates for the top-left pixel of the block in the original image
            const startX = x * resolution;
            const startY = y * resolution;

            let totalBrightness = 0;
            let pixelCount = 0;

            // Calculate the average brightness of the resolution x resolution block
            for (let blockY = 0; blockY < resolution; blockY++) {
                for (let blockX = 0; blockX < resolution; blockX++) {
                    const currentX = startX + blockX;
                    const currentY = startY + blockY;

                    // Ensure we are within the image bounds
                    if (currentX < tempCanvas.width && currentY < tempCanvas.height) {
                        const pixelIndex = (currentY * tempCanvas.width + currentX) * 4;
                        const r = data[pixelIndex];
                        const g = data[pixelIndex + 1];
                        const b = data[pixelIndex + 2];

                        // Use the luminance formula for a more accurate perceived brightness
                        const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
                        totalBrightness += brightness;
                        pixelCount++;
                    }
                }
            }

            const avgBrightness = pixelCount > 0 ? totalBrightness / pixelCount : 0;

            // Map the average brightness (0-255) to a character in the alphabet string
            // Darker areas (low brightness) map to the start of the alphabet (denser chars)
            // Lighter areas (high brightness) map to the end (sparser chars)
            const charIndex = Math.floor((avgBrightness / 255) * (alphabet.length - 1));
            const character = alphabet.charAt(charIndex);

            // Draw the character if it's not a space (for performance)
            if (character && character.trim() !== '') {
                const drawX = x * charWidth + charWidth / 2;
                const drawY = y * charHeight + charHeight / 2;
                outputCtx.fillText(character, drawX, drawY);
            }
        }
    }

    // --- 7. Return the Final Canvas ---
    return outputCanvas;
}