watermark.js

A common use case for watermarking is to lay one image on top of another. The following examples demonstrate some of the pre-packaged image positioning functions that come with watermark.js.

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

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

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

          
watermark(['img/wolf.jpg', 'img/logo.png'])
  .image(watermark.image.upperLeft(0.5))
  .then(function (img) {
    document.getElementById('upper-left').appendChild(img);
  });
          
        

          
watermark(['img/coffee.jpg', 'img/logo.png'])
  .image(watermark.image.center(0.5))
  .then(function (img) {
    document.getElementById('center').appendChild(img);
  });
          
        

          
var getX = function(boat, logo) {
  return 73;
};

var getY = function(boat, logo) {
  return 63;
};

// atPos is the basis for all positioning functions
watermark(['img/boat.jpg', 'img/logo.png'])
  .image(watermark.image.atPos(getX, getY, 0.5))
  .then(function (img) {
    document.getElementById('arbitrary').appendChild(img);
  });
          
        

          
// using load to draw additional images
watermark(['img/boat.jpg', 'img/logo.png'])
  .image(watermark.image.lowerRight(0.5))
  .load(['img/peridot.png'])
  .image(watermark.image.upperLeft(0.5))
  .then(function (img) {
    document.getElementById('multiple').appendChild(img);
  });