Please bookmark this page to avoid losing your image tool!

Image Calendar Date And Time Stamper

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
function processImage(
    originalImg, 
    stampDate = "current", 
    stampTime = "current", 
    position = "bottom-right", 
    textColor = "#ffaa00", 
    strokeColor = "#000000", 
    fontSizePercent = 3
) {
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');

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

    // Get current date and time if requested
    const now = new Date();
    const yyyy = now.getFullYear();
    const mm = String(now.getMonth() + 1).padStart(2, '0');
    const dd = String(now.getDate()).padStart(2, '0');
    const hh = String(now.getHours()).padStart(2, '0');
    const min = String(now.getMinutes()).padStart(2, '0');
    const ss = String(now.getSeconds()).padStart(2, '0');

    const finalDate = stampDate === "current" ? `${yyyy}-${mm}-${dd}` : stampDate;
    const finalTime = stampTime === "current" ? `${hh}:${min}:${ss}` : stampTime;

    // Combine date and time, trimming any leading/trailing spaces if one is empty
    const stampText = `${finalDate} ${finalTime}`.trim();

    // Calculate font size relative to image height to ensure it scales correctly
    let fontSize = (canvas.height * parseFloat(fontSizePercent)) / 100;
    if (fontSize < 10) fontSize = 10; // Minimum size for readability
    
    // Set standard styling for a digital camera style timestamp
    ctx.font = `bold ${fontSize}px "Courier New", Courier, monospace`;
    ctx.textBaseline = "middle";

    const padding = fontSize;
    const textWidth = ctx.measureText(stampText).width;

    let x = 0;
    let y = 0;

    // Determine target location based on the position setting
    switch(position.toLowerCase()) {
        case 'bottom-right':
            x = canvas.width - textWidth - padding;
            y = canvas.height - padding;
            break;
        case 'bottom-left':
            x = padding;
            y = canvas.height - padding;
            break;
        case 'top-right':
            x = canvas.width - textWidth - padding;
            y = padding;
            break;
        case 'top-left':
            x = padding;
            y = padding;
            break;
        case 'center':
            x = (canvas.width - textWidth) / 2;
            y = canvas.height / 2;
            break;
        default:
            x = canvas.width - textWidth - padding;
            y = canvas.height - padding;
            break;
    }

    // Draw a dark stroke/outline first for text visibility on light/white backgrounds
    ctx.lineWidth = Math.max(2, fontSize * 0.1);
    ctx.strokeStyle = strokeColor;
    ctx.strokeText(stampText, x, y);

    // Fill the text over the outline
    ctx.fillStyle = textColor;
    ctx.fillText(stampText, x, y);

    return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Calendar Date and Time Stamper allows you to overlay specific date and time information directly onto your images. Users can customize the timestamp text, choose its position on the image (such as corners or center), and adjust the text color, outline color, and font size to ensure readability. This tool is useful for adding chronological context to photographs, documenting site progress, or creating digital watermarks for archival and evidentiary purposes.

Leave a Reply

Your email address will not be published. Required fields are marked *