Image To Fibonacci Number Representation Converter

function processImage(
    originalImg, 
    fontSize = 12, 
    backgroundColor = "#000000", 
    fontColor = "#00FF00", 
    preserveOriginalColors = "true", 
    intensityAsAlpha = "false"
) {
    // Parse parameters
    const size = parseInt(fontSize, 10) || 12;
    const useOriginalColors = String(preserveOriginalColors).toLowerCase() === "true";
    const useAlpha = String(intensityAsAlpha).toLowerCase() === "true";

    // Setup main canvas
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    
    const width = originalImg.width;
    const height = originalImg.height;
    
    canvas.width = width;
    canvas.height = height;

    // Estimate character dimensions for a monospace font
    ctx.font = `bold ${size}px monospace`;
    const charWidth = ctx.measureText("0").width || (size * 0.6);
    const charHeight = size;

    const cols = Math.max(1, Math.floor(width / charWidth));
    const rows = Math.max(1, Math.floor(height / charHeight));
    const requiredLength = cols * rows;

    // Generate continuous Fibonacci digit string
    // Calculate safely using BigInt, up to a reasonable cap to ensure performance on huge images
    let fibStr = "11";
    let a = 1n;
    let b = 1n;
    const MAX_FIB_LEN = 1000000; 

    while (fibStr.length < requiredLength && fibStr.length < MAX_FIB_LEN) {
        let next = a + b;
        a = b;
        b = next;
        fibStr += next.toString();
    }

    // Use an offscreen canvas to downscale the image and sample colors
    const offscreenCanvas = document.createElement("canvas");
    offscreenCanvas.width = cols;
    offscreenCanvas.height = rows;
    
    const offCtx = offscreenCanvas.getContext("2d", { willReadFrequently: true });
    offCtx.drawImage(originalImg, 0, 0, cols, rows);
    const imgData = offCtx.getImageData(0, 0, cols, rows).data;

    // Draw background
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, width, height);

    // Prepare to draw text
    ctx.font = `bold ${size}px monospace`;
    ctx.textBaseline = "top";

    let charIndex = 0;
    
    for (let y = 0; y < rows; y++) {
        for (let x = 0; x < cols; x++) {
            const pixelIndex = (y * cols + x) * 4;
            const r = imgData[pixelIndex];
            const g = imgData[pixelIndex + 1];
            const bVal = imgData[pixelIndex + 2];
            const alpha = imgData[pixelIndex + 3];

            if (alpha > 0) {
                // Wrap around safely in case the target dimensions required more digits than MAX_FIB_LEN
                const currIdx = charIndex % fibStr.length;
                const char = fibStr[currIdx];
                
                let drawAlpha = 1.0;
                
                // Adjust opacity based on original brightness if selected
                if (useAlpha) {
                    const lum = (0.299 * r + 0.587 * g + 0.114 * bVal) / 255;
                    drawAlpha = lum * (alpha / 255);
                } else if (alpha < 255) {
                    drawAlpha = alpha / 255;
                }
                
                if (drawAlpha > 0.05) {
                    ctx.globalAlpha = drawAlpha;

                    if (useOriginalColors) {
                        ctx.fillStyle = `rgb(${r}, ${g}, ${bVal})`;
                    } else {
                        ctx.fillStyle = fontColor;
                    }
                    
                    const drawX = x * charWidth;
                    const drawY = y * charHeight;
                    
                    ctx.fillText(char, drawX, drawY);
                }
            }
            charIndex++;
        }
    }
    
    ctx.globalAlpha = 1.0;
    
    return canvas;
}