通过前端方法实现水印加密

为了防止信息泄露或知识产权被侵犯，在web的世界里，对于页面和图片等增加水印处理是十分有必要的，水印的添加根据环境可以分为两大类，前端浏览器环境添加和后端服务环境添加，简单对比一下这两种方式的特点：

前端浏览器加水印：

减轻服务端的压力，快速反应
安全系数较低，对于掌握一定前端知识的人来说可以通过各种骚操作跳过水印获取到源文件
适用场景：资源不跟某一个单独的用户绑定，而是一份资源，多个用户查看，需要在每一个用户查看的时候添加用户特有的水印，多用于某些机密文档或者展示机密信息的页面，水印的目的在于文档外流的时候可以追究到责任人

后端服务器加水印：

当遇到大文件密集水印，或是复杂水印，占用服务器内存、运算量，请求时间过长
安全性高，无法获取到加水印前的源文件
适用场景：资源为某个用户独有，一份原始资源只需要做一次处理，将其存储之后就无需再次处理，水印的目的在于标示资源的归属人

因为减轻对后端服务器的压力，所以这次讲讲通过前端方法去实现一个水印加密。

实现方案

1. 重复的dom元素覆盖实现

从效果开始，要实现的效果是「在页面上充满透明度较低的重复的代表身份的信息」，第一时间想到的方案是在页面上覆盖一个position:fixed的div盒子，盒子透明度设置较低，设置pointer-events: none;样式实现点击穿透，在这个盒子内通过js循环生成小的水印div，每个水印div内展示一个要显示的水印内容，简单实现了一下

  <style> #watermark-box { position: fixed; top: 0; bottom: 0; left: 0; right: 0; font-size: 24px; font-weight: 700; display: flex; flex-wrap: wrap; overflow: hidden; user-select: none; pointer-events: none; opacity: 0.1; z-index: 999;} .watermark { text-align: center; } </style>

缺点：页面效果是有了，但是这种方案需要要在js内循环创建多个dom元素，既不优雅也影响性能，于是考虑可不可以不生成这么多个元素。

2. canvas输出背景图

canvas 有着不错的兼容性，是一种比较可靠、成熟的可视化技术。但是它比较依赖分辨率，对文本的处理上也有着先天的不足。但是它可以很方便的将结果保存为图片，对于完成水印的需求也是非常合适的。

第一步还是在页面上覆盖一个固定定位的盒子，然后创建一个canvas画布，绘制出一个水印区域，将这个水印通过toDataURL方法输出为一个图片，将这个图片设置为盒子的背景图，通过backgroud-repeat：repeat；样式实现填满整个屏幕的效果，简单实现的代码。

export default class CanvasWay {constructor(watermark) {this.watermark = watermarkconst {width, height} = watermarkthis.canvas = document.createElement('canvas');this.canvas.setAttribute('width', width);this.canvas.setAttribute('height', height);}render() {const {txt, x, y, width, height, font, color, fontSize, alpha, angle} = this.watermarkconst ctx = this.canvas.getContext('2d');ctx.clearRect(0, 0, width, height);ctx.textBaseline = 'top';ctx.textAlign = 'left'ctx.fillStyle = color;ctx.globalAlpha = alpha;ctx.font = `${fontSize}px ${font}`ctx.translate(x, y)ctx.rotate(Math.PI / 180 * angle);ctx.translate(-x, -y - fontSize)ctx.fillText(txt, x, y + fontSize);return this.canvas.toDataURL();}
}

还有一种类似于canvas的方法。

3.svg 生成方式

svg 与 canvas 相比浏览器兼容性几乎一致，除了几个早期的 Android 版本，这样的设备以及很难找到了，完全可以忽略。svg 使用的是 XML 的方式，不依赖分辨率，在做文本水印这件事上 svg 有着更好的优势

与canvas生成背景图的方法类似，只不过是生成背景图的方法换成了通过svg生成，canvas的兼容性略好于svg。

export default class SvgWay {constructor(watermark) {this.watermark = watermark}render() {const {txt, x, y, width, height, color, font, fontSize, alpha, angle} = this.watermarkconst svgStr =`<svg xmlns="http://www.w3.org/2000/svg" width="${width}px" height="${height}px"><text x="${x}px" y="${y}px" dy="${fontSize}px"text-anchor="start"stroke="${color}"stroke-opacity="${alpha}"fill="none"transform="rotate(${angle},${x} ${y})"font-weight="100"font-size="${fontSize}"font-family="${font}">${txt}</text></svg>`;return `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`;}
}

但是，以上三种方法存在一个共同的问题，由于是前端生成dom元素覆盖到页面上的，对于有些前端知识的人来说，可以在开发者工具中找到水印所在的元素，将元素整个删掉，以达到删除页面上的水印的目的，针对这个问题，我想到了一个很笨的办法：设置定时器，每隔几秒检验一次我们的水印元素还在不在，有没有被修改，如果发生了变化则再执行一次覆盖水印的方法。

但是这种用定时器的方法还是会对我们造成很大的人力资源浪费，所以在网上看到了一种解决方法：使用MutationObserver：

MutationObserver 对现代浏览的兼容性还是不错的，MutationObserver是变动观察器，字面上就可以理解这是用来观察Node（节点）变化的。MutationObserver是在DOM4规范中定义的，它的前身是MutationEvent事件，最低支持版本为 ie9 ，目前已经被弃用。

但是MutationObserver只能监测到诸如属性改变、子结点变化等，对于自己本身被删除，是没有办法监听的，这里可以通过监测父结点来达到要求：

实现的监控的代码如下：

const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;export const observer = (callback) => {if (!MutationObserver) return falselet bodyObserver = new MutationObserver(mutationsList => mutationsList.forEach(mutation =>mutation.removedNodes.forEach(_target => _target.id === _id && callback())))bodyObserver.observe(document.body, {childList: true});const target = document.getElementById(_id);let observer = new MutationObserver(callback);observer.observe(target, {characterData: true, attributes: true, childList: true, subtree: true});return {bodyObserver, observer};
}

4.通过NodeJS生成水印

这种方式是需要借助到后端的一种方法：
身为现代前端开发者，Node.JS也是需要掌握的。我们同样可以通过NodeJS来生成网页水印（出于性能考虑更好的方式是利用用户客户端来生成）。前端发一个请求，参数带上水印内容，后台返回图片内容。
具体实现（Koa2环境）：

安装gm以及相关环境，详情看gm文档
ctx.type = ‘image/png’;设置响应为图片类型
生成图片过程是异步的，所以需要包装一层Promise，这样才能为通过 async/await 方式为 ctx.body 赋值

const fs = require('fs')
const gm = require('gm');
const imageMagick = gm.subClass({imageMagick: true
});const router = require('koa-router')();router.get('/wm', async (ctx, next) => {const {text} = ctx.query;ctx.type = 'image/png';ctx.status = 200;ctx.body = await ((() => {return new Promise((resolve, reject) => {imageMagick(200, 100, "rgba(255,255,255,0)").fontSize(40).drawText(10, 50, text).write(require('path').join(__dirname, `./${text}.png`), function (err) {if (err) {reject(err);} else {resolve(fs.readFileSync(require('path').join(__dirname, `./${text}.png`)))}});})})());
});

以上就是几种可以很少借助后端实现的给图片加水印的方法，在实现浏览PDF、下载公司文件的时候为了保密性都可以尝试使用。