Add Watermark to Image Tutorial

The **Watermark Image** tool helps you protect your intellectual property by adding custom text or logo overlays. This tool functions entirely within your browser using HTML5 Canvas, ensuring your original photos are never uploaded to a server.

1. Upload Main Image

Start by selecting the base photo you want to watermark. The tool supports JPG and PNG formats with a file size limit of 25MB.

Upload Options:

  • Select Image: Click the blue "Select Image" button to browse files.
  • Drag & Drop: Drag your file directly into the upload box, which highlights upon hovering.

2. Add Your Watermark

You can add an image logo, custom text, or both simultaneously using the sidebar controls.

Option A: Image Watermark (Logo)

  • Click "Choose File" under **Watermark Image** to upload your logo.
  • Size: Use the "Image Size" slider (1-100) to scale the logo.
  • Opacity: Adjust the "Image Opacity" slider to make the logo transparent or solid.

Option B: Text Watermark

  • Type your desired content into the **Text** input field.
  • Styling: Use the sliders to adjust **Text Size** and **Text Opacity**.
  • Color: Click the **Text Color** picker to match your brand's palette.

3. Position and Resize

The tool offers an interactive canvas for precise placement.

Interactivity:

  • Move: Simply click and drag the text or image directly on the canvas to reposition it anywhere.
  • Visual Resize: A blue square handle appears at the corner of your uploaded watermark image; drag it to resize visually.

4. Download the Result

Once you are satisfied with the placement and style:

  • Click the **"Download"** button located below the canvas.
  • The final image is generated instantly and saved as `watermarked-image.png`.
  • If you made a mistake, click **"Reset"** to clear all changes and start over.