Image To Zero Converter

function processImage(originalImg, charSize = 8, backgroundColor = "#000000") {
    // Ensure charSize is a valid number
    charSize = parseInt(charSize, 10);
    if (isNaN(charSize) || charSize < 2) {
        charSize = 8;
    }

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

    // Create an offscreen canvas to extract pixel data from the original image
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = width;
    tempCanvas.height = height;
    const tempCtx = tempCanvas.getContext('2d');
    tempCtx.drawImage(originalImg, 0, 0, width, height);

    let imageData;
    try {
        imageData = tempCtx.getImageData(0, 0, width, height);
    } catch (e) {
        // Fallback in case of CORS errors
        console.error("Unable to get image data. Ensure the image is on the same origin or has correct CORS headers.");
        return originalImg;
    }

    const data = imageData.data;

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

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

    // Context settings for drawing the zeros
    outCtx.font = `bold ${charSize}px monospace`;
    outCtx.textAlign = 'center';
    outCtx.textBaseline = 'middle';

    // Loop through the image grid stepping by charSize
    for (let y = charSize / 2; y < height; y += charSize) {
        for (let x = charSize / 2; x < width; x += charSize) {
            const px = Math.floor(x);
            const py = Math.floor(y);
            const index = (py * width + px) * 4;
            
            const r = data[index];
            const g = data[index + 1];
            const b = data[index + 2];
            const a = data[index + 3];

            // Only draw if the pixel is not completely transparent
            if (a > 0) {
                outCtx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
                outCtx.fillText('0', x, y);
            }
        }
    }

    return outCanvas;
}