Add Watermark To Images In Javascript (Simple Examples)

Welcome to a tutorial on how to add a watermark to images in Javascript. Want to lessen the server load? Add a watermark to an image before uploading? Yes, it is possible using a canvas.

That covers the quick basics, but read on for detailed examples!

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/watermark-image-javascript/” title=”How To Add Watermark To Images In Javascript” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

EXAMPLE 1) TEXT WATERMARK

<!-- (A) HTML CANVAS -->
<canvas id="demo"></canvas>
 
<script>
// (B) IMAGE + WATERMARK + CANVAS
var img = new Image(),
    watermark = "Copyright",
    canvas = document.getElementById("demo"),
    ctx = canvas.getContext("2d");
 
// (C) ADD WATERMARK (WHEN IMAGE IS FULLY LOADED)
img.onload = () => {
  // (C1) SET IMAGE
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
 
  // (C2) ADD WATERMARK
  ctx.font = "bold 24px Arial";
  ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
  ctx.fillText(watermark, 10, 30);
 
  // (C3) DOWNLOAD (IF YOU WANT)
  let anchor = document.createElement("a");
  anchor.href = canvas.toDataURL("image/webp");
  anchor.download = "demoA.webp";
  anchor.click();
  anchor.remove();
}
 
// (D) GO
img.src = "source.png";
</script>

1. We can actually create a “hidden canvas” var canvas = document.createElement("canvas") in Javascript, but we will just display it for this example.
2. Create an image object, define your text watermark, and get the canvas itself.
3. We wait for the image to be fully loaded before adding the watermark. Then, as in the introduction:
   • We use ctx.drawImage() to draw the background image first.
   • Then, use ctx.fillText() to draw the watermark text on the image.

 

 

EXAMPLE 2) IMAGE WATERMARK

<!-- (A) HTML CANVAS -->
<canvas id="demo"></canvas>
 
<script>
// (B) IMAGE + WATERMARK + CANVAS
var img = new Image(),
    watermark = new Image(),
    loaded = 0,
    canvas = document.getElementById("demo"),
    ctx = canvas.getContext("2d");
 
// (C) ADD WATERMARK (WHEN IMAGES ARE FULLY LOADED)
function mark () { loaded++; if (loaded==2) {
  // (C1) SET IMAGE
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
 
  // (C2) ADD WATERMARK
  ctx.drawImage(watermark, 0, 0, watermark.naturalWidth, watermark.naturalHeight);
 
  // (C3) DOWNLOAD (IF YOU WANT)
  let anchor = document.createElement("a");
  anchor.href = canvas.toDataURL("image/webp");
  anchor.download = "demoB.webp";
  anchor.click();
  anchor.remove();
}
 
// (D) GO
img.onload = mark;
watermark.onload = mark;
img.src = "source.png";
watermark.src = "potato.png";
</script>

Look no further – This is pretty much the same as the text watermark. The only difference here is that we are adding a watermark image on top, instead of text.

 

 

EXAMPLE 3) CENTER WATERMARK ON IMAGE

// (C) ADD WATERMARK (WHEN IMAGES ARE FULLY LOADED)
function mark () { loaded++; if (loaded==2) {
  // (C1) SET IMAGE
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
 
  // (C2) CALCULATE CENTER
  var wx = Math.floor(img.naturalWidth/2 - watermark.naturalWidth/2),
      wy = Math.floor(img.naturalHeight/2 - watermark.naturalHeight/2);
 
  // (C3) ADD WATERMARK
  ctx.drawImage(watermark, wx, wy, watermark.naturalWidth, watermark.naturalHeight);
}}

As you can see, the position of the watermark is set with wx, wy coordinates. To specify an exact position, things are sadly going to be very Mathematical… But in “plain English”:

• The X coordinate is FLOOR((Image Width ÷ 2) - (Watermark Width ÷ 2)).
• The Y coordinate is FLOOR((Image Height ÷ 2) - (Watermark Height ÷ 2)).

Brutal, but that’s how it works.

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

COMPATIBILITY CHECKS

• Canvas – CanIUse
• Draw Image – CanIUse
• Arrow Function – CanIUse
• To Data URL – CanIUse

The examples should work on all modern browsers.

 

LINKS & REFERENCES

• Canvas API – MDN
• Canvas Element – MDN
• Draw Image – MDN
• Download Canvas As Image – Code Boxx
• Crop Images In Javascript – Code Boxx

 

INFOGRAPHIC CHEAT SHEET