Image To Number Four Converter

function processImage(originalImg, char = "4", gridSize = 8, backgroundColor = "#000000") {
    const width = originalImg.width;
    const height = originalImg.height;
    
    // Ensure gridSize is a valid number and at least 2 pixels to avoid browser freezing
    const size = Math.max(2, parseInt(gridSize) || 8);

    // Create a hidden canvas for sampling the image's original colors
    const sampleCanvas = document.createElement('canvas');
    sampleCanvas.width = width;
    sampleCanvas.height = height;
    const sampleCtx = sampleCanvas.getContext('2d', { willReadFrequently: true });
    sampleCtx.drawImage(originalImg, 0, 0, width, height);

    // Create the output canvas to render the text
    const outCanvas = document.createElement('canvas');
    outCanvas.width = width;
    outCanvas.height = height;
    const outCtx = outCanvas.getContext('2d');

    // Fill the output canvas with the background color
    outCtx.fillStyle = backgroundColor;
    outCtx.fillRect(0, 0, width, height);

    // Configure text rendering properties
    outCtx.font = `bold ${size}px monospace`;
    outCtx.textAlign = "center";
    outCtx.textBaseline = "middle";

    // Extract image data for color sampling
    const imgData = sampleCtx.getImageData(0, 0, width, height).data;

    // Loop through the image in grid blocks
    for (let y = 0; y < height; y += size) {
        for (let x = 0; x < width; x += size) {
            // Find the center point of the current grid cell
            const sampleX = Math.floor(Math.min(x + size / 2, width - 1));
            const sampleY = Math.floor(Math.min(y + size / 2, height - 1));

            // Calculate the 1D array index for the pixel data (RGBA format)
            const index = (sampleY * width + sampleX) * 4;
            
            const r = imgData[index];
            const g = imgData[index + 1];
            const b = imgData[index + 2];
            const a = imgData[index + 3];

            // Render the target character ("4") using the sampled color
            if (a > 0) { // Skip fully transparent pixels
                // Calculate brightness to optionally add variation, but using exact color here
                outCtx.fillStyle = `rgb(${r}, ${g}, ${b})`;
                outCtx.fillText(char, sampleX, sampleY);
            }
        }
    }

    return outCanvas;
}