html 水印插件,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)

安装

通过包管理器安装 npm 和 bower：

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

开发动机

不是每个服务器都有图片处理库，特别是那些共享主机的网站。

不是每个服务器都有可靠的并发库来高效上传并处理图片，特别是那些共享主机的网站。

JavaScript 既好玩有有趣，特别是 ES6。

我承认这并不是很好的解决方案，显然当对 URL 和页面上的元素进行水印时，客户机上的水印具有一定的局限性，好奇的人可以找到非水印图像的 URL，但很可能大多数普通用户不会沿着这条路走下去，保持这个软屏障很有用，就像很多网站屏蔽了鼠标右键一样。

JS 能够接受文件输入作为水印的源。这使得它很容易预览和上传，而没有任何非水印图像被公开。

这个工具当然会在管理后台或CMS环境中发光，在这些环境中，您希望生成水印，并在服务器上不可能或不可取的地方异步上传水印。服务器少做一件事情是件好事。

相关链接