Watermark.js 在浏览器端添加水印插件 - 文章教程

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

发布于 2020-05-21 字数 2655 浏览 2593 评论 0

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

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

兼容性

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

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0