Image Bulk Date And Location Stamper

/**
 * Stamps an image with date and location information.
 *
 * @param {Image} originalImg The original Javascript Image object to be stamped.
 * @param {string} dateStr The date string to display. Defaults to the current date and time.
 * @param {string} roadName The road name to display.
 * @param {string} zone The zone or city to display.
 * @param {string} country The country to display.
 * @param {string} textColor The color of the text (e.g., '#FFFF00', 'yellow').
 * @param {string} position The position of the stamp. Can be 'bottom-right', 'bottom-left', 'top-right', or 'top-left'.
 * @param {number} fontSize The size of the font in pixels. If set to 0, the font size will be automatically calculated based on the image width.
 * @param {string} fontFamily The font family for the text (e.g., 'Arial', 'Courier New').
 * @returns {HTMLCanvasElement} A new canvas element with the stamped image.
 */
function processImage(
    originalImg,
    dateStr = new Date().toLocaleString(),
    roadName = "Main Street",
    zone = "City Center",
    country = "USA",
    textColor = "#FFFF00",
    position = "bottom-right",
    fontSize = 0,
    fontFamily = "Arial"
) {
    // 1. Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // 4. Prepare the text lines to be stamped
    // Combine location parts, filtering out any empty strings
    const locationLine = [roadName, zone, country].filter(part => part && part.trim() !== '').join(', ');
    const lines = [];
    if (locationLine) lines.push(locationLine);
    if (dateStr && dateStr.trim() !== '') lines.push(dateStr);

    // If there is no text to stamp, return the canvas with just the image
    if (lines.length === 0) {
        return canvas;
    }

    // 5. Determine font size
    // If fontSize is 0, auto-calculate it based on image width; otherwise, use the provided value.
    const finalFontSize = fontSize > 0 ? fontSize : Math.floor(Math.max(12, canvas.width / 40));

    // 6. Set up text styling
    ctx.font = `bold ${finalFontSize}px ${fontFamily}`;
    ctx.fillStyle = textColor;

    // Add a text shadow for better readability against any background
    ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
    ctx.shadowBlur = finalFontSize / 5;
    ctx.shadowOffsetX = finalFontSize / 10;
    ctx.shadowOffsetY = finalFontSize / 10;

    // 7. Calculate text position and draw the text
    const margin = finalFontSize;
    const lineHeight = finalFontSize * 1.25;
    let x, y;

    switch (position) {
        case 'bottom-left':
            ctx.textAlign = 'left';
            ctx.textBaseline = 'bottom';
            x = margin;
            y = canvas.height - margin;
            // Draw lines from the bottom up
            for (let i = 0; i < lines.length; i++) {
                ctx.fillText(lines[lines.length - 1 - i], x, y - (i * lineHeight));
            }
            break;

        case 'top-left':
            ctx.textAlign = 'left';
            ctx.textBaseline = 'top';
            x = margin;
            y = margin;
            // Draw lines from the top down
            for (let i = 0; i < lines.length; i++) {
                ctx.fillText(lines[i], x, y + (i * lineHeight));
            }
            break;

        case 'top-right':
            ctx.textAlign = 'right';
            ctx.textBaseline = 'top';
            x = canvas.width - margin;
            y = margin;
            // Draw lines from the top down
            for (let i = 0; i < lines.length; i++) {
                ctx.fillText(lines[i], x, y + (i * lineHeight));
            }
            break;

        case 'bottom-right':
        default:
            ctx.textAlign = 'right';
            ctx.textBaseline = 'bottom';
            x = canvas.width - margin;
            y = canvas.height - margin;
            // Draw lines from the bottom up
            for (let i = 0; i < lines.length; i++) {
                ctx.fillText(lines[lines.length - 1 - i], x, y - (i * lineHeight));
            }
            break;
    }

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