watermark.js浏览器中的水印生成库

watermark.js 是一个 JavaScript 框架用于以批量的方式对图片插入水印。它利用 HTML5 canvas 标签实现，只要为图片添加特定的 class 就能添加水印。采用 ES6 编写而成，并通过 Babel 提供给当前的浏览器。支持网址、文件输入、blob 和页面图像。

任何支持 File 和 FileReader 的浏览器都应该可以工作。以下浏览器已经过测试：

• IE10 (Windows 7)

• Chrome 42 (OS X 10.10.3)

• Firefox 38 (OS X 10.10.3)

• Safari 8.0.6 (OS X 10.10.3)

• Opera 29.0 (OS X 10.10.3)

Composite Images

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

Alpha Transparency

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

Text

watermark(['/img/field.jpg'])
  .image(watermark.text.lowerRight('MyPhoto', '28px serif', '#fff', 0.5))
  .then(function (img) {
    document.getElementById('text').appendChild(img);
  });