Image Website Visitor Counter Tool

/**
 * Creates an image-based website visitor counter by drawing a number over a given image.
 *
 * @param {HTMLImageElement} originalImg The background image for the counter.
 * @param {number} count The visitor count number to display. Defaults to 123456.
 * @param {string} fontFamily The font family for the counter text. ควรใช้ web-safe fonts or Google Fonts. Defaults to 'Arial'.
 * @param {number} fontSize The font size in pixels for the counter text. Defaults to 24.
 * @param {string} fontColor The color of the counter text (e.g., 'white', '#FF0000'). Defaults to 'black'.
 * @param {number} xPosition The horizontal (x-axis) position of the text. If not provided, it defaults to the center.
 * @param {number} yPosition The vertical (y-axis) position of the text. If not provided, it defaults to the center.
 * @param {string} textAlign The horizontal alignment of the text ('left', 'right', 'center'). Defaults to 'center'.
 * @param {string} textBaseline The vertical alignment of the text ('top', 'middle', 'bottom'). Defaults to 'middle'.
 * @returns {HTMLCanvasElement} A canvas element with the original image and the counter text drawn on it.
 */
async function processImage(originalImg, count = 123456, fontFamily = 'Arial', fontSize = 24, fontColor = 'black', xPosition = null, yPosition = null, textAlign = 'center', textBaseline = 'middle') {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Make sure the image is fully loaded to get its dimensions
    await originalImg.decode();

    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);

    // Set up the text properties
    ctx.font = `${fontSize}px "${fontFamily}"`;
    ctx.fillStyle = fontColor;
    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;

    // Determine the position for the text
    // If xPosition or yPosition are not provided, default to the center of the canvas.
    const finalX = xPosition === null ? imgWidth / 2 : xPosition;
    const finalY = yPosition === null ? imgHeight / 2 : yPosition;

    // Draw the counter text onto the canvas
    ctx.fillText(String(count), finalX, finalY);

    // Return the final canvas element
    return canvas;
}