Watermark.js 在浏览器端添加水印插件

Question

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环境中发光，在这些环境中，您希望生成水印，并在服务器上不可能或不可取的地方异步上传水印。服务器少做一件事情是件好事。

相关链接

• Github 地址：https://github.com/brianium/watermarkjs