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

Preview:

JavaScript Library For Creating Watermarks On Images –  watermark.js

Description:

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);
  });

 

You Might Be Interested In:


Leave a Reply