Image Bulk Date And Text Stamp Adder

/**
 * Stamps multiple lines of text, including the current date, onto an image.
 * The text lines are stacked vertically.
 *
 * @param {Image} originalImg The original image object to be processed.
 * @param {string} [roadName=''] The road name text to stamp. Skipped if empty or just whitespace.
 * @param {string} [zone=''] The zone text to stamp. Skipped if empty or just whitespace.
 * @param {string} [country=''] The country text to stamp. Skipped if empty or just whitespace.
 * @param {number} [stampDate=1] Set to 1 to stamp the current date/time, 0 to disable.
 * @param {string} [fontColor='#FFFFFF'] The color of the text (e.g., 'white', '#FF0000'). Defaults to white as requested.
 * @param {number} [fontSize=24] The font size of the text in pixels.
 * @param {string} [fontFamily='Arial'] The font family for the text. Use web-safe fonts.
 * @param {string} [position='bottom-right'] The position of the stamp. Options: 'top-left', 'top-right', 'bottom-left', 'bottom-right'.
 * @param {number} [xMargin=10] The horizontal margin from the edge of the image in pixels.
 * @param {number} [yMargin=10] The vertical margin from the edge of the image in pixels.
 * @param {string} [backgroundColor='rgba(0, 0, 0, 0.5)'] The background color of the text block. Use an empty string '' for no background.
 * @returns {HTMLCanvasElement} A new canvas element with the stamped image.
 */
function processImage(originalImg, roadName = '', zone = '', country = '', stampDate = 1, fontColor = '#FFFFFF', fontSize = 24, fontFamily = 'Arial', position = 'bottom-right', xMargin = 10, yMargin = 10, backgroundColor = 'rgba(0, 0, 0, 0.5)') {

    // Helper function to format a date into a standard YYYY-MM-DD HH:mm:ss timestamp format.
    const formatDate = (date) => {
        const pad = (n) => n.toString().padStart(2, '0');
        const year = date.getFullYear();
        const month = pad(date.getMonth() + 1);
        const day = pad(date.getDate());
        const hours = pad(date.getHours());
        const minutes = pad(date.getMinutes());
        const seconds = pad(date.getSeconds());
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };

    // Assemble the lines of text to be stamped. Skip any empty inputs.
    const lines = [];
    if (stampDate === 1) {
        lines.push(formatDate(new Date()));
    }
    if (roadName && roadName.trim() !== '') {
        lines.push(roadName.trim());
    }
    if (zone && zone.trim() !== '') {
        lines.push(zone.trim());
    }
    if (country && country.trim() !== '') {
        lines.push(country.trim());
    }

    // Create a canvas to draw on.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to the original image's intrinsic dimensions.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // If there are no lines to stamp, we can return the canvas now.
    if (lines.length === 0) {
        return canvas;
    }

    // --- Text & Block Styling ---
    ctx.font = `${fontSize}px ${fontFamily}`;
    const lineHeight = fontSize * 1.2;
    const padding = fontSize / 3; // Padding around the text inside the background block.

    // --- Calculate Block Dimensions ---
    // Find the width of the longest line of text.
    let maxWidth = 0;
    lines.forEach(line => {
        const textMetrics = ctx.measureText(line);
        if (textMetrics.width > maxWidth) {
            maxWidth = textMetrics.width;
        }
    });

    const blockWidth = maxWidth + (padding * 2);
    // The total height of the text from the top of the first line to the bottom of the last.
    const textContentHeight = ((lines.length - 1) * lineHeight) + fontSize;
    const blockHeight = textContentHeight + (padding * 2);

    // --- Calculate Block Position ---
    let blockX;
    let textAlignment;

    // Horizontal alignment.
    if (position.includes('right')) {
        blockX = canvas.width - xMargin - blockWidth;
        textAlignment = 'right';
    } else { // Default to 'left'.
        blockX = xMargin;
        textAlignment = 'left';
    }

    // Vertical alignment.
    let blockY;
    if (position.includes('bottom')) {
        blockY = canvas.height - yMargin - blockHeight;
    } else { // Default to 'top'.
        blockY = yMargin;
    }

    // --- Draw Background ---
    if (backgroundColor && backgroundColor.trim() !== '') {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(blockX, blockY, blockWidth, blockHeight);
    }

    // --- Draw Text ---
    ctx.fillStyle = fontColor;
    ctx.textAlign = textAlignment;
    ctx.textBaseline = 'top';

    const textX = (textAlignment === 'left') ? (blockX + padding) : (blockX + blockWidth - padding);
    const textStartY = blockY + padding;

    lines.forEach((line, index) => {
        ctx.fillText(line, textX, textStartY + (index * lineHeight));
    });

    // Return the final canvas, which can be appended to the document.
    return canvas;
}