Photo Watermark With Timestamp For Multiple Images Tool

/**
 * Adds a text watermark with a timestamp to an image.
 * This function handles a single image at a time. The application's UI
 * would be responsible for managing multiple images and calling this function for each.
 *
 * @param {HTMLImageElement} originalImg - The original image object to be watermarked. The image must be loaded.
 * @param {string} text - The watermark text. If empty or 'timestamp', a current timestamp will be generated and used. Default is ''.
 * @param {string} position - The position of the watermark. Can be 'top-left', 'top-right', 'bottom-left', 'bottom-right', or 'center'. Default is 'bottom-right'.
 * @param {string} font - The font family for the watermark text. Web-safe fonts are recommended. Default is 'Arial'.
 * @param {number} fontSize - The font size in pixels. Default is 30.
 * @param {string} fontColor - The color of the watermark text (e.g., 'white', '#FFFFFF', 'rgba(255, 255, 255, 0.7)'). Default is 'rgba(255, 255, 255, 0.7)'.
 * @param {number} offsetX - The horizontal margin from the edge in pixels. Default is 10.
 * @param {number} offsetY - The vertical margin from the edge in pixels. Default is 10.
 * @returns {HTMLCanvasElement} A new canvas element with the watermarked image.
 */
function processImage(
    originalImg,
    text = '',
    position = 'bottom-right',
    font = 'Arial',
    fontSize = 30,
    fontColor = 'rgba(255, 255, 255, 0.7)',
    offsetX = 10,
    offsetY = 10
) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the original image dimensions
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

    // Prepare the watermark text. Generate a timestamp if text is empty.
    let watermarkText = text;
    if (watermarkText === '' || watermarkText.toLowerCase() === 'timestamp') {
        const now = new Date();
        const pad = (num) => num.toString().padStart(2, '0');
        watermarkText = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
    }

    // Set font properties and a subtle shadow for better readability
    ctx.font = `${fontSize}px ${font}`;
    ctx.fillStyle = fontColor;
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowBlur = 4;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;

    // Calculate text position based on the 'position' parameter
    let x, y;
    switch (position.toLowerCase()) {
        case 'top-left':
            ctx.textAlign = 'left';
            ctx.textBaseline = 'top';
            x = offsetX;
            y = offsetY;
            break;
        case 'top-right':
            ctx.textAlign = 'right';
            ctx.textBaseline = 'top';
            x = canvas.width - offsetX;
            y = offsetY;
            break;
        case 'bottom-left':
            ctx.textAlign = 'left';
            ctx.textBaseline = 'bottom';
            x = offsetX;
            y = canvas.height - offsetY;
            break;
        case 'center':
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            x = canvas.width / 2;
            y = canvas.height / 2;
            break;
        case 'bottom-right':
        default: // Default to bottom-right
            ctx.textAlign = 'right';
            ctx.textBaseline = 'bottom';
            x = canvas.width - offsetX;
            y = canvas.height - offsetY;
            break;
    }

    // Draw the watermark text onto the canvas
    ctx.fillText(watermarkText, x, y);

    // Return the final canvas element
    return canvas;
}