Image Bulk Date And Location Stamp Adder

/**
 * Stamps text information onto an image, such as date and location details, in a multi-line block.
 * This function is designed to be called for each image in a bulk processing task.
 *
 * @param {HTMLImageElement} originalImg The original image object to be stamped. Must be fully loaded.
 * @param {string} [dateText=''] The date string to stamp. If left empty, it defaults to the current date in YYYY-MM-DD format.
 * @param {string} [roadNameText='Main Street'] The first line of text, e.g., a road name.
 * @param {string} [zoneText='Central Zone'] The second line of text, e.g., a zone or city.
 * @param {string} [countryText='Countryland'] The third line of text, e.g., a country.
 * @param {string} [textColor='#FFFFFF'] The color of the text stamp. The user's "weight" is interpreted as "white".
 * @param {number} [fontSize=24] The font size of the text in pixels.
 * @param {string} [fontFamily='Arial'] The font family for the text. Web-safe fonts like Arial, Verdana, or Times New Roman are recommended for compatibility.
 * @param {string} [position='Bottom-Right'] The position of the text block. Options: 'Top-Left', 'Top-Center', 'Top-Right', 'Middle-Left', 'Middle-Center', 'Middle-Right', 'Bottom-Left', 'Bottom-Center', 'Bottom-Right'.
 * @param {string} [textBgColor='rgba(0, 0, 0, 0.5)'] The background color for the text block to ensure readability. Can be set to 'transparent' for no background.
 * @returns {HTMLCanvasElement} A new canvas element with the original image and the text stamp drawn on it.
 */
function processImage(originalImg, dateText = '', roadNameText = 'Main Street', zoneText = 'Central Zone', countryText = 'Countryland', textColor = '#FFFFFF', fontSize = 24, fontFamily = 'Arial', position = 'Bottom-Right', textBgColor = 'rgba(0, 0, 0, 0.5)') {
    // 1. Create and setup the canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image is fully loaded to get correct dimensions
    if (!originalImg.complete || originalImg.naturalWidth === 0) {
        console.error("Image is not loaded or has invalid dimensions.");
        // Return a placeholder canvas indicating an error
        canvas.width = 400;
        canvas.height = 200;
        ctx.fillStyle = "#F0F0F0";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "red";
        ctx.textAlign = "center";
        ctx.font = "16px sans-serif";
        ctx.fillText("Error: The source image could not be loaded.", canvas.width / 2, canvas.height / 2);
        return canvas;
    }

    // Set canvas dimensions to match the image and draw the image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 2. Prepare text lines for stamping
    // If the date string is empty, use the current date in YYYY-MM-DD format
    const finalDateText = (dateText && String(dateText).trim() !== '') ? dateText : new Date().toISOString().slice(0, 10);

    // Create an array of text lines, filtering out any empty or whitespace-only strings
    const lines = [finalDateText, roadNameText, zoneText, countryText]
        .map(line => String(line).trim())
        .filter(line => line !== '');

    // If there's nothing to stamp, return the canvas with just the original image
    if (lines.length === 0) {
        return canvas;
    }

    // 3. Define styles and measure text dimensions
    const cleanFontSize = Number(fontSize) || 24;
    const fontStyle = `${cleanFontSize}px ${fontFamily}`;
    ctx.font = fontStyle;

    // Set padding and margin relative to the font size for scalability
    const padding = cleanFontSize * 0.5;
    const margin = cleanFontSize * 0.5;
    const lineHeight = cleanFontSize * 1.3; // Line height for multi-line text

    // Find the width of the longest line of text to determine background width
    const maxWidth = Math.max(...lines.map(line => ctx.measureText(line).width));

    // Calculate the dimensions for the text's background box
    const bgWidth = maxWidth + padding * 2;
    const textBlockHeight = (lines.length * lineHeight) - (lineHeight - cleanFontSize);
    const bgHeight = textBlockHeight + padding * 2;

    // 4. Calculate position for the background box and text
    let bgX, bgY, textX;

    // Calculate vertical position (Y-axis)
    if (position.includes('Top')) {
        bgY = margin;
    } else if (position.includes('Bottom')) {
        bgY = canvas.height - bgHeight - margin;
    } else { // Default to 'Middle' or 'Center'
        bgY = (canvas.height - bgHeight) / 2;
    }

    // Calculate horizontal position (X-axis) and set text alignment
    if (position.includes('Center') && !position.includes('Left') && !position.includes('Right')) {
        bgX = (canvas.width - bgWidth) / 2;
        ctx.textAlign = 'center';
        textX = bgX + bgWidth / 2;
    } else if (position.includes('Right')) {
        bgX = canvas.width - bgWidth - margin;
        ctx.textAlign = 'right';
        textX = bgX + bgWidth - padding;
    } else { // Default to 'Left'
        bgX = margin;
        ctx.textAlign = 'left';
        textX = bgX + padding;
    }

    // 5. Draw the semi-transparent background for the text
    if (textBgColor && textBgColor !== 'transparent' && textBgColor !== 'none') {
        ctx.fillStyle = textBgColor;
        ctx.fillRect(bgX, bgY, bgWidth, bgHeight);
    }

    // 6. Draw each line of text
    ctx.fillStyle = textColor;
    ctx.font = fontStyle;
    ctx.textBaseline = 'top'; // Align text from its top edge

    lines.forEach((line, i) => {
        // Calculate the Y position for the current line
        const textY = bgY + padding + (i * lineHeight);
        ctx.fillText(line, textX, textY);
    });

    // 7. Return the final canvas element
    return canvas;
}