Image To Text Writer Tool

function processImage(originalImg, text = '@%#*+=-:. ', mode = 'brightness', fontSize = 12, bgColor = '#000000') {
    // Parameter validation and defaults
    fontSize = parseInt(fontSize, 10);
    if (isNaN(fontSize) || fontSize <= 0) fontSize = 12;
    if (!text || typeof text !== 'string') text = '@%#*+=-:. ';
    
    mode = mode.toLowerCase();
    if (mode !== 'brightness' && mode !== 'sequence') mode = 'brightness';

    const width = originalImg.width;
    const height = originalImg.height;

    // Create a temporary canvas to read the image pixel data
    const srcCanvas = document.createElement('canvas');
    srcCanvas.width = width;
    srcCanvas.height = height;
    const srcCtx = srcCanvas.getContext('2d');
    srcCtx.drawImage(originalImg, 0, 0, width, height);

    let imgData;
    try {
        imgData = srcCtx.getImageData(0, 0, width, height);
    } catch (e) {
        console.error("Could not read image data. This is likely due to CORS restrictions:", e);
        return originalImg;
    }
    const data = imgData.data;

    // Create the output canvas
    const dstCanvas = document.createElement('canvas');
    dstCanvas.width = width;
    dstCanvas.height = height;
    const dstCtx = dstCanvas.getContext('2d');

    // Draw the background color
    dstCtx.fillStyle = bgColor;
    dstCtx.fillRect(0, 0, width, height);

    // Setup text styling
    dstCtx.font = `bold ${fontSize}px monospace`;
    dstCtx.textAlign = 'center';
    dstCtx.textBaseline = 'middle';

    // A monospace character's width is typically around 60% of its height/font-size
    const stepX = Math.max(1, Math.floor(fontSize * 0.6));
    const stepY = fontSize;
    const textLen = text.length;

    let seqIndex = 0;

    // Iterate through the image using a grid based on character dimensions
    for (let y = stepY / 2; y < height; y += stepY) {
        for (let x = stepX / 2; x < width; x += stepX) {
            
            // Calculate the average color for the current grid cell
            let rSum = 0, gSum = 0, bSum = 0, aSum = 0, count = 0;
            
            const startY = Math.max(0, Math.floor(y - stepY / 2));
            const endY = Math.min(height, Math.floor(y + stepY / 2));
            const startX = Math.max(0, Math.floor(x - stepX / 2));
            const endX = Math.min(width, Math.floor(x + stepX / 2));

            for (let py = startY; py < endY; py++) {
                for (let px = startX; px < endX; px++) {
                    const idx = (py * width + px) * 4;
                    const aVal = data[idx + 3];
                    
                    // Premultiply by alpha to get a cleaner average color
                    rSum += data[idx] * aVal;
                    gSum += data[idx + 1] * aVal;
                    bSum += data[idx + 2] * aVal;
                    aSum += aVal;
                    count++;
                }
            }

            // Skip cells that are completely transparent
            if (count === 0 || aSum === 0) continue;

            const r = Math.round(rSum / aSum);
            const g = Math.round(gSum / aSum);
            const b = Math.round(bSum / aSum);
            // Reconstruct average alpha value
            const a = (aSum / count) / 255;

            // Don't draw almost invisible texts
            if (a < 0.05) continue;

            let charToDraw = '';

            if (mode === 'brightness') {
                // Determine perceptual luminance
                const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b);
                
                // Map the luminance (0-255) to the string gradient
                // Dense characters (like @) are typically at index 0 and map to brighter areas
                let charIdx = Math.floor(((255 - luminance) / 255) * textLen);
                if (charIdx < 0) charIdx = 0;
                if (charIdx >= textLen) charIdx = textLen - 1;
                
                charToDraw = text.charAt(charIdx);
            } else {
                // Sequence mode places characters from the custom string exactly in order
                charToDraw = text.charAt(seqIndex % textLen);
                seqIndex++;
            }

            // Draw the character filled with the original averaged image color
            dstCtx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
            dstCtx.fillText(charToDraw, x, y);
        }
    }

    return dstCanvas;
}