Please bookmark this page to avoid losing your image tool!

Image Bulk Date And Text Stamp Adder

(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.
/**
 * Stamps multiple lines of text, including the current date, onto an image.
 * The text lines are stacked vertically.
 *
 * @param {Image} originalImg The original image object to be processed.
 * @param {string} [roadName=''] The road name text to stamp. Skipped if empty or just whitespace.
 * @param {string} [zone=''] The zone text to stamp. Skipped if empty or just whitespace.
 * @param {string} [country=''] The country text to stamp. Skipped if empty or just whitespace.
 * @param {number} [stampDate=1] Set to 1 to stamp the current date/time, 0 to disable.
 * @param {string} [fontColor='#FFFFFF'] The color of the text (e.g., 'white', '#FF0000'). Defaults to white as requested.
 * @param {number} [fontSize=24] The font size of the text in pixels.
 * @param {string} [fontFamily='Arial'] The font family for the text. Use web-safe fonts.
 * @param {string} [position='bottom-right'] The position of the stamp. Options: 'top-left', 'top-right', 'bottom-left', 'bottom-right'.
 * @param {number} [xMargin=10] The horizontal margin from the edge of the image in pixels.
 * @param {number} [yMargin=10] The vertical margin from the edge of the image in pixels.
 * @param {string} [backgroundColor='rgba(0, 0, 0, 0.5)'] The background color of the text block. Use an empty string '' for no background.
 * @returns {HTMLCanvasElement} A new canvas element with the stamped image.
 */
function processImage(originalImg, roadName = '', zone = '', country = '', stampDate = 1, fontColor = '#FFFFFF', fontSize = 24, fontFamily = 'Arial', position = 'bottom-right', xMargin = 10, yMargin = 10, backgroundColor = 'rgba(0, 0, 0, 0.5)') {

    // Helper function to format a date into a standard YYYY-MM-DD HH:mm:ss timestamp format.
    const formatDate = (date) => {
        const pad = (n) => n.toString().padStart(2, '0');
        const year = date.getFullYear();
        const month = pad(date.getMonth() + 1);
        const day = pad(date.getDate());
        const hours = pad(date.getHours());
        const minutes = pad(date.getMinutes());
        const seconds = pad(date.getSeconds());
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };

    // Assemble the lines of text to be stamped. Skip any empty inputs.
    const lines = [];
    if (stampDate === 1) {
        lines.push(formatDate(new Date()));
    }
    if (roadName && roadName.trim() !== '') {
        lines.push(roadName.trim());
    }
    if (zone && zone.trim() !== '') {
        lines.push(zone.trim());
    }
    if (country && country.trim() !== '') {
        lines.push(country.trim());
    }

    // Create a canvas to draw on.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to the original image's intrinsic dimensions.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // If there are no lines to stamp, we can return the canvas now.
    if (lines.length === 0) {
        return canvas;
    }

    // --- Text & Block Styling ---
    ctx.font = `${fontSize}px ${fontFamily}`;
    const lineHeight = fontSize * 1.2;
    const padding = fontSize / 3; // Padding around the text inside the background block.

    // --- Calculate Block Dimensions ---
    // Find the width of the longest line of text.
    let maxWidth = 0;
    lines.forEach(line => {
        const textMetrics = ctx.measureText(line);
        if (textMetrics.width > maxWidth) {
            maxWidth = textMetrics.width;
        }
    });

    const blockWidth = maxWidth + (padding * 2);
    // The total height of the text from the top of the first line to the bottom of the last.
    const textContentHeight = ((lines.length - 1) * lineHeight) + fontSize;
    const blockHeight = textContentHeight + (padding * 2);

    // --- Calculate Block Position ---
    let blockX;
    let textAlignment;

    // Horizontal alignment.
    if (position.includes('right')) {
        blockX = canvas.width - xMargin - blockWidth;
        textAlignment = 'right';
    } else { // Default to 'left'.
        blockX = xMargin;
        textAlignment = 'left';
    }

    // Vertical alignment.
    let blockY;
    if (position.includes('bottom')) {
        blockY = canvas.height - yMargin - blockHeight;
    } else { // Default to 'top'.
        blockY = yMargin;
    }

    // --- Draw Background ---
    if (backgroundColor && backgroundColor.trim() !== '') {
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(blockX, blockY, blockWidth, blockHeight);
    }

    // --- Draw Text ---
    ctx.fillStyle = fontColor;
    ctx.textAlign = textAlignment;
    ctx.textBaseline = 'top';

    const textX = (textAlignment === 'left') ? (blockX + padding) : (blockX + blockWidth - padding);
    const textStartY = blockY + padding;

    lines.forEach((line, index) => {
        ctx.fillText(line, textX, textStartY + (index * lineHeight));
    });

    // Return the final canvas, which can be appended to the document.
    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 Bulk Date and Text Stamp Adder is a versatile tool that allows users to overlay multiple lines of text, including the option to add the current date, onto an image. Users can customize the text with various parameters such as font color, font size, and position on the image. This tool is ideal for creating watermarked images, adding captions or location information, and personalizing photos for social media or documentation purposes. Its functionalities are particularly useful for photographers, real estate agents, or anyone looking to enhance images with contextual information.

Leave a Reply

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