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)

安装

# install via npm
$ npm install watermarkjs

# install via bower
$ bower install watermarkjs

使用

// watermark by local path
watermark(['img/photo.jpg', 'img/logo.png'])
  .image(watermark.image.lowerRight(0.5))
  .then(img => document.getElementById('container').appendChild(img));

// load a url and file object
const upload = document.querySelector('input[type=file]').files[0];
watermark([upload, 'img/logo.png'])
  .image(watermark.image.lowerLeft(0.5))
  .then(img => document.getElementById('container').appendChild(img));

// watermark from remote source
const options = {
  init(img) {
    img.crossOrigin = 'anonymous'
  }
};
watermark(['http://host.com/photo.jpg', 'http://host.com/logo.png'], options)
  .image(watermark.image.lowerRight(0.5))
  .then(img => document.getElementById('container').appendChild(img));

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/3623