Image To Code Text Converter

function processImage(
    originalImg, 
    codeText = "const text='code';function toImage(){return true;};", 
    fontSize = 12, 
    backgroundColor = "#0e0e11", 
    removeWhitespace = "true"
) {
    // Validate and parse numerical inputs
    fontSize = parseInt(fontSize, 10);
    if (isNaN(fontSize) || fontSize < 4) fontSize = 12;

    // Process the code string to be mapped across the image
    let txt = codeText;
    if (String(removeWhitespace).toLowerCase() === "true") {
        txt = txt.replace(/\s+/g, '');
    } else {
        // Canvas fillText doesn't support multiline directly, so replace line breaks with spaces
        txt = txt.replace(/[\n\r\t]/g, ' '); 
    }
    // Fallback if the processed string is empty
    if (txt.length === 0) txt = "01";

    // Create a temporary canvas context to measure text dimensions
    const measureCanvas = document.createElement('canvas');
    const measureCtx = measureCanvas.getContext('2d');
    measureCtx.font = `${fontSize}px monospace`;
    
    // Using a reliable monospace character to determine uniform width
    const charWidth = measureCtx.measureText('M').width || (fontSize * 0.6);

    // Limit maximum output dimensions to prevent browser crashes
    const MAX_OUT_WIDTH = 3000;
    let scaleFactor = 1;
    if (originalImg.width > MAX_OUT_WIDTH) {
        scaleFactor = MAX_OUT_WIDTH / originalImg.width;
    }

    // Determine grid size where each grid cell corresponds to one character
    const targetOutWidth = originalImg.width * scaleFactor;
    const targetOutHeight = originalImg.height * scaleFactor;
    const cols = Math.floor(targetOutWidth / charWidth);
    const rows = Math.floor(targetOutHeight / fontSize);

    if (cols <= 0 || rows <= 0) {
        throw new Error("Image too small or font size too large.");
    }

    // Draw the image pixelated down to the exact columns and rows to easily grab colors
    const sampleCanvas = document.createElement('canvas');
    sampleCanvas.width = cols;
    sampleCanvas.height = rows;
    const sampleCtx = sampleCanvas.getContext('2d');
    
    sampleCtx.drawImage(originalImg, 0, 0, cols, rows);
    const imgData = sampleCtx.getImageData(0, 0, cols, rows).data;

    // Prepare the final output canvas
    const outCanvas = document.createElement('canvas');
    outCanvas.width = cols * charWidth;
    outCanvas.height = rows * fontSize;
    const outCtx = outCanvas.getContext('2d');

    // Fill the background color
    if (backgroundColor.toLowerCase() !== 'transparent') {
        outCtx.fillStyle = backgroundColor;
        outCtx.fillRect(0, 0, outCanvas.width, outCanvas.height);
    }

    // Configure text drawing parameters
    outCtx.font = `${fontSize}px monospace`;
    outCtx.textBaseline = 'top';

    let charIdx = 0;
    const txtLen = txt.length;

    // Iterate through our pixelated grid, painting text sampled from the code string
    for (let y = 0; y < rows; y++) {
        for (let x = 0; x < cols; x++) {
            const i = (y * cols + x) * 4;
            const r = imgData[i];
            const g = imgData[i + 1];
            const b = imgData[i + 2];
            const a = imgData[i + 3];

            // Only draw if the pixel has significant opacity
            if (a > 10) {
                // Set paint color
                outCtx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
                
                // Retrieve the next character
                const char = txt[charIdx % txtLen];
                
                // Draw text at exact grid mapping
                outCtx.fillText(char, x * charWidth, y * fontSize);
                
                charIdx++;
            }
        }
    }

    return outCanvas;
}