Image Translator Code Generator

/**
 * Translates an image into a grid of characters, creating a "code" or "Matrix" like visual effect.
 * This function samples the image in a grid, calculates the average color and brightness for each cell,
 * and then draws a character from a specified set with a color based on the original image.
 *
 * @param {Image} originalImg The original source HTML Image object.
 * @param {number} [fontSize=10] The size of each character cell in pixels. This effectively controls the output resolution.
 * @param {string} [characterSet='アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン'] The string of characters to use for rendering. Image brightness is mapped to the index of a character in this string. The default Katakana set provides a sci-fi/Matrix aesthetic.
 * @param {number} [useImageColor=1] A flag to determine character color. If 1, characters are colored based on the original image pixels. If 0, a single color (`textColor`) is used.
 * @param {string} [textColor='#00FF41'] The color to use for all characters if `useImageColor` is set to 0.
 * @param {string} [backgroundColor='#000000'] The background color of the output canvas.
 * @param {number} [invertBrightness=0] A flag to invert the brightness mapping. If 1, light areas of the image are mapped to characters at the start of the characterSet, and dark areas to the end.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves to a new canvas element displaying the generated character art.
 */
async function processImage(originalImg, fontSize = 10, characterSet = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン', useImageColor = 1, textColor = '#00FF41', backgroundColor = '#000000', invertBrightness = 0) {
    
    // --- 1. Sanitize and prepare parameters ---
    const finalFontSize = Math.max(1, Number(fontSize) || 10);
    const finalCharSet = String(characterSet) || ' ';
    const useColor = Number(useImageColor) === 1;
    const invert = Number(invertBrightness) === 1;

    // --- 2. Set up canvases ---
    const imgWidth = originalImg.width;
    const imgHeight = originalImg.height;

    // Create a canvas to draw the original image and access its pixel data
    const originalCanvas = document.createElement('canvas');
    originalCanvas.width = imgWidth;
    originalCanvas.height = imgHeight;
    // Use { willReadFrequently: true } for performance optimization
    const originalCtx = originalCanvas.getContext('2d', { willReadFrequently: true });
    originalCtx.drawImage(originalImg, 0, 0);
    const originalImageData = originalCtx.getImageData(0, 0, imgWidth, imgHeight);
    const originalData = originalImageData.data;

    // Calculate grid dimensions and set up the output canvas
    const cols = Math.floor(imgWidth / finalFontSize);
    const rows = Math.floor(imgHeight / finalFontSize);
    const outputWidth = cols * finalFontSize;
    const outputHeight = rows * finalFontSize;

    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = outputWidth;
    outputCanvas.height = outputHeight;
    const outputCtx = outputCanvas.getContext('2d');

    // --- 3. Prepare the output canvas for drawing ---
    outputCtx.fillStyle = backgroundColor;
    outputCtx.fillRect(0, 0, outputWidth, outputHeight);
    outputCtx.font = `${finalFontSize}px monospace`;
    outputCtx.textAlign = 'center';
    outputCtx.textBaseline = 'middle';

    // --- 4. Process the image and draw the character grid ---
    for (let y = 0; y < rows; y++) {
        for (let x = 0; x < cols; x++) {
            // Get the average color and alpha of the current cell
            const cellStartX = x * finalFontSize;
            const cellStartY = y * finalFontSize;

            let totalR = 0, totalG = 0, totalB = 0, totalA = 0;
            let pixelCount = 0;

            for (let j = 0; j < finalFontSize; j++) {
                for (let i = 0; i < finalFontSize; i++) {
                    const px = cellStartX + i;
                    const py = cellStartY + j;
                    
                    if (px < imgWidth && py < imgHeight) {
                        const index = (py * imgWidth + px) * 4;
                        totalR += originalData[index];
                        totalG += originalData[index + 1];
                        totalB += originalData[index + 2];
                        totalA += originalData[index + 3];
                        pixelCount++;
                    }
                }
            }

            if (pixelCount === 0) continue;

            const avgR = totalR / pixelCount;
            const avgG = totalG / pixelCount;
            const avgB = totalB / pixelCount;
            const avgA = totalA / pixelCount;

            // Skip drawing for mostly transparent cells
            if (avgA < 128) {
                continue;
            }

            // Calculate brightness using the luminance formula
            const brightness = (0.299 * avgR + 0.587 * avgG + 0.114 * avgB);
            
            // Map brightness (0-255) to a factor (0-1)
            let brightnessFactor = brightness / 255;
            if (invert) {
                brightnessFactor = 1 - brightnessFactor;
            }

            // Select a character from the set based on brightness
            const charIndex = Math.floor(brightnessFactor * (finalCharSet.length - 1));
            const char = finalCharSet[charIndex];

            if (char) {
                // Set the character color
                if (useColor) {
                    outputCtx.fillStyle = `rgb(${Math.round(avgR)}, ${Math.round(avgG)}, ${Math.round(avgB)})`;
                } else {
                    outputCtx.fillStyle = textColor;
                }
                
                // Draw the character in the center of the cell
                const posX = cellStartX + finalFontSize / 2;
                const posY = cellStartY + finalFontSize / 2;
                outputCtx.fillText(char, posX, posY);
            }
        }
    }
    
    // --- 5. Return the final canvas ---
    return outputCanvas;
}