Please bookmark this page to avoid losing your image tool!

Image Watermark Adder

(Free & Supports Bulk Upload)

Drag & drop your images here or

Choose Files

Watermark Text

Font Size

Font Family

Font Color

Position X

Position Y

Rotation Angle

Text Alignment

Text Baseline

The result will appear here...

JavaScript Code (For Advanced Users)

You can edit the below JavaScript code to customize the image tool.

function processImage(
    originalImg,
    watermarkText = "Sample",
    fontSize = 30,
    fontFamily = "Arial",
    fontColor = "rgba(255, 255, 255, 0.5)",
    positionX = 10,
    positionY = 10,
    angle = 0,
    textAlign = "left",
    textBaseline = "top"
) {
    // 1. Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set canvas dimensions to match the original image
    // Use naturalWidth/Height if available, otherwise fallback to width/height
    // Caller should ensure the image is loaded for best results.
    const imageWidth = originalImg.naturalWidth || originalImg.width;
    const imageHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imageWidth;
    canvas.height = imageHeight;

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

    // 4. Set watermark text properties
    ctx.font = `${fontSize}px ${fontFamily}`;
    ctx.fillStyle = fontColor;
    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;

    // 5. Handle rotation if angle is specified
    if (angle !== 0) {
        ctx.save(); // Save the current canvas state (transformations, styles)

        // Translate the canvas context to the point where the text will be anchored
        ctx.translate(positionX, positionY);
        
        // Rotate the canvas context
        ctx.rotate(angle * Math.PI / 180); // Convert degrees to radians

        // Draw the watermark text. Since we've translated,
        // we draw at (0,0) relative to the new, rotated origin.
        ctx.fillText(watermarkText, 0, 0);

        ctx.restore(); // Restore the canvas state to what it was before save()
    } else {
        // 6. Draw watermark text (no rotation)
        ctx.fillText(watermarkText, positionX, positionY);
    }

    // 7. Return the canvas element
    return canvas;
}

Free Image Tool Creator

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

Create a custom image tool

Description

The Image Watermark Adder is a versatile online tool that allows users to overlay text watermarks onto images. It provides several customization options including font size, font family, color, and positioning of the watermark. The tool can be useful for photographers, graphic designers, and businesses that want to protect their images, promote their brand, or add personal touches to their visuals. Whether for enhancing copyright protection or for creating custom graphics for social media, this tool makes it easy to add a professional-looking watermark to any image.

JavaScript Code (For Advanced Users)

Free Image Tool Creator

Description

Leave a Reply Cancel reply

Other Image Tools: