扫一扫分享
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));
手机预览