前端如何优雅的添加水印及去除水印

作者：什么地方的炒面好吃

✅顺便吆喝一声，如果你计算机、软件工程、电子等相关专业本科及以上学历（非学院派）。 前/后端or测试可投，综合薪酬15-35K

在最近接手的一个项目中，需要对整个页面加上一个水印，还需要动态修改增加背景色功能。由于使用的第三方库不支持背景色功能，故记录一下。文末会附上如何利用技术手段去除水印

第三方库：watermark-plus

主要使用步骤

css
 代码解读
复制代码
npm i watermark-plus

javascript
 代码解读
复制代码
import WaterMark from 'watermark-plus'

arduino
 代码解读
复制代码
const waterMark = new WaterMark({
  content: '水印内容',
  width: 200,
  height: 100,
  alpha: 0.2,
  background: 'yellow', // 当前这个参数不支持，需要改源码
  bAlpha: background == '#ffffff' ? '0' : 0.18,
})

为什么背景色要在水印上加，而不在其他元素上加？

主要是随着项目体系的增加以及浏览器的渲染分层，会导致有些地方的背景色被别的元素遮盖。就算最后加上了，以后写css也要格外小心，防止有z-index冲突

下面说一下怎么实现增加背景色功能

先说一下watermark-plus库实现水印的原理，只有了解其中的原理才能对症下药

1. 使用canvas把用户传入的内容绘制出来
2. 使用toDataURL将Canvas图像转换对应的data URI(base64)
3. 动态创建两个div元素，设置相对应的css属性
4. 监听body下的dom元素变化(MutationObserver)，如果修改或被移除的Nodes第一个元素是当前水印元素时会重新生成水印

背景色实现

1. 在构造函数中处理background参数
2. 使用canvas的fillStyle和fillRect增加背景色功能
3. (o.fillStyle = t.background), o.fillRect(0, 0, t.width, t.height),
4. 本人是基于打包后源码修改，所以代码看起来可能有点怪

最终背景色能够成功展示

如何去除基于watermark-plus库生成的水印

因为该库监听的body的dom变动，所以单纯的去利用css去隐藏水印是行不通的，它会重新生成水印元素

可以利用源码中的逻辑判断绕过重新生成逻辑

只需要让removedNodes的第一个元素不是水印元素就可以了

以下是实现去除水印的测试代码（水印元素默认被body元素appendChild）

ini
 代码解读
复制代码
const body = document.body
const children = body.childNodes
const fragment = document.createElement('createDocumentFragment')
// 最后一个是水印元素，不需要appendChild处理; appendChild如果是文档树中已存在的，则会将原dom删除，所以这块不需要i++，children.length是个动态值
for (let i = 0; i < children.length - 2;) {
  fragment.appendChild(children[i])
}
body.innerHTML = ''
body.appendChild(fragment)

最终断点呈现的效果

第一个不再是水印元素，所以可以绕过重新生成水印元素的逻辑，想要修复也很简单，直接遍历MutationRecord list判断就行了

其余去除水印的方法

1、其实也可以禁用javascript来达到去掉水印效果，只不过现代网页如果离开了javascript就会丧失一些交互效果

2、利用浏览器的Overrides直接改写逻辑，这对打断点技术要求有点高，也可以尝试一下。