JavaScript Library For Creating Watermarks On Images – watermark.js

watermark.js is a JavaScript library used to place image or text watermarks on top of your images. Fully customizable and supports both local and remote images.

Basic usage:

Load the watermark.js in your project.

<script src="scripts/watermark-polyfill.js"></script>

Load an image into your document.

// load local images
watermark(['img/coffee.jpg', '/img/logo.png']);
// load cross domain images
watermark(['http://web.com/a.jpg', 'http://web.com/b.jpg'], function (img) {
  img.crossOrigin = 'anonymous';
});
// load a url and a file object
var upload = document.querySelector('input[type=file]').files[0];
watermark(['img/photo.jpg', upload]);

Lay one image on top of another.

watermark(['img/shepherd.jpg', 'img/logo.png'])
  .image(watermark.image.lowerRight(0.5))
  .then(function (img) {
    document.getElementById('lower-right').appendChild(img);
  });

Write some text on top of an image.

watermark(['img/shepherd.jpg'])
  .image(text.lowerRight('watermark.js', '48px Josefin Slab', '#fff', 0.5))
  .then(function (img) {
    document.getElementById('lower-right').appendChild(img);
  });