Image To Storyteller Text Generator

/**
 * Image To Storyteller Text Generator
 * Converts an image into text art using a provided story text. Each letter of the story
 * is colored based on the underlying pixel of the original image, recreating it through text.
 * 
 * @param {HTMLImageElement} originalImg - The source image to be processed.
 * @param {string} text - The story text used to draw the image.
 * @param {number} fontSize - The size of the font in pixels.
 * @param {string} bgColor - The background color of the output canvas.
 * @param {string} fontFamily - The font family used to render the text.
 * @returns {HTMLCanvasElement} - The canvas element containing the generated text-art image.
 */
function processImage(
    originalImg, 
    text = "В синем море, где волны играют в догонялки с ветром, жил-был царь Салтан, чья борода, как старый дуб, трещала от смеха. Он сидел на троне из янтаря, а вокруг него — бояре, как сытые чайки, клюющие новости. Однажды царица, чьи глаза были глубже океана, родила ему сына — Гвидона, который с пелёнок уже вертел мечом так, что искры летели. Но злые сёстры, завистливые, как акулы, шепнули царю: «Чудо ли? Ребёнок, говорят, родился с плавниками!» И Салтан, хоть и мудр, но в душе — моряк, поверил и велел заточить царицу с младенцем в бочку и бросить в пучину. Бочка плыла, как кит, играющий в салки, и волны пели ей колыбельную. Гвидон рос не по дням, а по часам: вчера сосал палец, а сегодня уже бороду бреет. Выбросило их на остров Буян, где царевна-лебедь, чьи перья сверкали, как звёзды на свадьбе, спасла их. Гвидон влюбился в неё, как в первый глоток ветра, и построил город — с башнями из шоколада и улицами из сахарной ваты. А Салтан, узнав о чудесах, приплыл на корабле, где паруса были из парчи", 
    fontSize = 12, 
    bgColor = "#000000", 
    fontFamily = "monospace"
) {
    // Ensure numeric input for font size
    const parsedFontSize = Number(fontSize) || 12;

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Match the original image dimensions
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    // Draw the original image to a temporary canvas to extract pixel data easily
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = canvas.width;
    tempCanvas.height = canvas.height;
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
    tempCtx.drawImage(originalImg, 0, 0);
    
    // Get raw pixel data
    const imgData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height).data;
    
    // Set up the output canvas background
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Set up typography bindings
    ctx.font = `bold ${parsedFontSize}px ${fontFamily}`;
    ctx.textBaseline = 'top';
    ctx.textAlign = 'center'; // Center horizontally in the grid cell
    
    // Calculate character steps based on font size.
    // We measure a typical wide character to get consistent spacing.
    const charWidth = ctx.measureText("М").width || (parsedFontSize * 0.6);
    const stepX = Math.max(1, charWidth);
    const stepY = Math.max(1, parsedFontSize);
    
    // Prepare the story text (ensure no line-breaks disrupt the flow)
    const story = text.replace(/[\r\n]+/g, ' ').trim() || "Сказка";
    let textIndex = 0;
    
    // Output Loop
    for (let y = 0; y < canvas.height; y += stepY) {
        for (let x = 0; x < canvas.width; x += stepX) {
            
            // Sample the pixel at the center point of the current character cell
            const pxX = Math.floor(x + stepX / 2);
            const pxY = Math.floor(y + stepY / 2);
            
            // Ensure we don't go out of bounds
            if (pxX >= canvas.width || pxY >= canvas.height) continue;
            
            const i = (pxY * canvas.width + pxX) * 4;
            const r = imgData[i];
            const g = imgData[i+1];
            const b = imgData[i+2];
            const a = imgData[i+3];
            
            // Only draw text if the underlying pixel is not fully transparent
            if (a > 10) {
                // Set text color to match the image pixel
                ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
                
                // Get the next character from our story (looping if necessary)
                const char = story[textIndex % story.length];
                
                // Draw the character
                // x + stepX / 2 is used because of 'center' text alignment
                ctx.fillText(char, x + stepX / 2, y);
                
                // Advance the story
                textIndex++;
            }
        }
    }
    
    return canvas;
}