Image Number Overlay Tool

/**
 * Overlays a grid with sequential numbers onto an image.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} [cols=10] The number of columns in the grid.
 * @param {number} [rows=10] The number of rows in the grid.
 * @param {number} [startNumber=1] The number to start counting from.
 * @param {number} [fontSize=0] The font size of the numbers in pixels. If 0, it's calculated automatically based on cell size.
 * @param {string} [fontColor='#FFFFFF'] The color of the numbers (e.g., 'white', '#FFF').
 * @param {string} [fontFamily='Arial'] The font family for the numbers.
 * @param {string} [gridColor='#000000'] The color of the grid lines.
 * @param {number} [gridWidth=1] The width of the grid lines in pixels.
 * @param {string} [showGrid='true'] Whether to display the grid lines ('true' or 'false').
 * @param {string} [shadowColor='#000000'] The color of the shadow behind the numbers for better visibility.
 * @param {number} [shadowBlur=2] The blur radius for the text shadow. A value of 0 disables the shadow.
 * @returns {HTMLCanvasElement} A new canvas element with the image and number overlay.
 */
function processImage(originalImg, cols = 10, rows = 10, startNumber = 1, fontSize = 0, fontColor = '#FFFFFF', fontFamily = 'Arial', gridColor = '#000000', gridWidth = 1, showGrid = 'true', shadowColor = '#000000', shadowBlur = 2) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image is fully loaded to get correct dimensions
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // Set canvas dimensions to match the image
    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Calculate the width and height of each grid cell
    const cellWidth = imgWidth / cols;
    const cellHeight = imgHeight / rows;

    // Draw grid lines if enabled
    const drawGrid = showGrid === 'true';
    if (drawGrid && gridWidth > 0) {
        ctx.beginPath();
        ctx.strokeStyle = gridColor;
        ctx.lineWidth = gridWidth;

        // Draw vertical lines
        for (let i = 1; i < cols; i++) {
            const x = i * cellWidth;
            ctx.moveTo(x, 0);
            ctx.lineTo(x, imgHeight);
        }

        // Draw horizontal lines
        for (let i = 1; i < rows; i++) {
            const y = i * cellHeight;
            ctx.moveTo(0, y);
            ctx.lineTo(imgWidth, y);
        }
        ctx.stroke();
    }

    // Set up text properties
    // If fontSize is 0, calculate a dynamic size based on the smaller cell dimension
    const finalFontSize = fontSize > 0 ?
        fontSize :
        Math.max(8, Math.floor(Math.min(cellWidth, cellHeight) / 2));

    ctx.font = `${finalFontSize}px ${fontFamily}`;
    ctx.fillStyle = fontColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Add a shadow for better text visibility on complex backgrounds
    if (shadowBlur > 0) {
        ctx.shadowColor = shadowColor;
        ctx.shadowBlur = shadowBlur;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
    }


    // Loop through each cell to draw the numbers
    for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
            const number = startNumber + (r * cols + c);
            const textX = c * cellWidth + cellWidth / 2;
            const textY = r * cellHeight + cellHeight / 2;

            ctx.fillText(number.toString(), textX, textY);
        }
    }

    // Return the final canvas element
    return canvas;
}