Image Date Stamp Adder

function processImage(originalImg, dateFormat = "YYYY-MM-DD HH:mm:ss", font = "Arial", fontSize = 20, fontColor = "white", backgroundColor = "rgba(0, 0, 0, 0.5)", position = "bottom-right", padding = 5, marginX = 10, marginY = 10) {

    // Helper function for date formatting
    // Replaces tokens like YYYY, MM, DD, HH, mm, ss, etc.
    function formatDateStr(dateObj, formatStr) {
        const YYYY = dateObj.getFullYear();
        const YY = String(YYYY).slice(-2);
        const M = dateObj.getMonth() + 1;
        const MM = String(M).padStart(2, '0');
        const D = dateObj.getDate();
        const DD = String(D).padStart(2, '0');
        const H = dateObj.getHours(); // 24-hour
        const HH = String(H).padStart(2, '0');
        const h = H % 12 || 12; // 12-hour
        const hh = String(h).padStart(2, '0');
        const m = dateObj.getMinutes();
        const mm = String(m).padStart(2, '0');
        const s = dateObj.getSeconds();
        const ss = String(s).padStart(2, '0');
        const A = H >= 12 ? 'PM' : 'AM';
        const a = H >= 12 ? 'pm' : 'am';

        let result = formatStr;
        // Replace longest tokens first to avoid conflicts (e.g., YYYY before YY)
        result = result.replace(/YYYY/g, YYYY.toString());
        result = result.replace(/YY/g, YY);
        result = result.replace(/MM/g, MM);
        result = result.replace(/M/g, M.toString()); // After MM
        result = result.replace(/DD/g, DD);
        result = result.replace(/D/g, D.toString()); // After DD
        result = result.replace(/HH/g, HH);
        result = result.replace(/H/g, H.toString()); // After HH
        result = result.replace(/hh/g, hh);
        result = result.replace(/h/g, h.toString()); // After hh
        result = result.replace(/mm/g, mm);
        result = result.replace(/m/g, m.toString()); // After mm
        result = result.replace(/ss/g, ss);
        result = result.replace(/s/g, s.toString()); // After ss
        result = result.replace(/A/g, A);
        result = result.replace(/a/g, a);

        return result;
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth and naturalHeight for the true image dimensions
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // Handle cases where the image might not be loaded or is invalid
    if (imgWidth === 0 || imgHeight === 0) {
        console.error("Image not loaded or has zero dimensions. Cannot add date stamp.");
        // Return a small canvas with an error message
        canvas.width = 350; // Increased width for better message display
        canvas.height = 100;
        // Optional: Draw a light background for the error canvas
        ctx.fillStyle = "rgb(240, 240, 240)";
        ctx.fillRect(0,0,canvas.width, canvas.height);
        
        ctx.fillStyle = "red";
        ctx.font = "bold 16px Arial";
        ctx.fillText("Error: Image Processing Failed", 10, 30);
        ctx.fillStyle = "black";
        ctx.font = "14px Arial";
        ctx.fillText("The image was not loaded or has invalid dimensions.", 10, 55);
        ctx.fillText("Please ensure the image is fully loaded before processing.", 10, 75);
        return canvas;
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    // Prepare the date string using the helper function
    const currentDate = new Date();
    const dateString = formatDateStr(currentDate, dateFormat);

    // Set font properties for measuring text
    // fontSize is ensured to be a number by guideline 2
    ctx.font = `${fontSize}px ${font}`;
    const textMetrics = ctx.measureText(dateString);
    const textWidth = textMetrics.width;
    
    // For layout purposes, textLayoutHeight is based on fontSize.
    const textLayoutHeight = fontSize; 

    // Calculate dimensions for the text background box
    const bgWidth = textWidth + 2 * padding;
    const bgHeight = textLayoutHeight + 2 * padding;

    // Calculate the top-left (X, Y) position for the background box
    let bgX, bgY;

    switch (position.toLowerCase()) {
        case "top-left":
            bgX = marginX;
            bgY = marginY;
            break;
        case "top-right":
            bgX = imgWidth - bgWidth - marginX;
            bgY = marginY;
            break;
        case "bottom-left":
            bgX = marginX;
            bgY = imgHeight - bgHeight - marginY;
            break;
        case "center":
            bgX = (imgWidth - bgWidth) / 2;
            bgY = (imgHeight - bgHeight) / 2;
            break;
        case "bottom-right":
        default: // Default to bottom-right if position is unrecognized
            bgX = imgWidth - bgWidth - marginX;
            bgY = imgHeight - bgHeight - marginY;
            break;
    }

    // Draw background for the text, if a color is specified
    if (backgroundColor && String(backgroundColor).toLowerCase() !== 'transparent' && String(backgroundColor).toLowerCase() !== 'none' && String(backgroundColor).trim() !== '') {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(bgX, bgY, bgWidth, bgHeight);
    }
    
    // Set text properties for drawing the date stamp
    ctx.fillStyle = fontColor;
    ctx.font = `${fontSize}px ${font}`; // Re-apply font style, as fillRect might reset some context properties
    ctx.textBaseline = 'top'; // Align text rendering to the top, makes Y-coordinate calculation simpler

    // Calculate text position (top-left corner of the text itself, inside the background and padding)
    const textX = bgX + padding;
    const textY = bgY + padding;

    // Draw the date string onto the canvas
    ctx.fillText(dateString, textX, textY);

    return canvas;
}