图片水印

优质

小牛编辑

123浏览

2023-12-01

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.

Lower Right

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

Lower Left

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

Upper Right

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

Upper Left

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

Center

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

Arbitrary Positions

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

Multiple Watermarks

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