JavaScript Library For Creating Watermarks On Images – watermark.js

Category: Image , Javascript , Recommended | May 20, 2015
Author: brianium
Views Total: 6,499 views
Official Page: Go to website
Last Update: May 20, 2015
License: MIT


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(['', ''], 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'])
  .then(function (img) {

Write some text on top of an image.

  .image(text.lowerRight('watermark.js', '48px Josefin Slab', '#fff', 0.5))
  .then(function (img) {


You Might Be Interested In:

Leave a Reply