前端如何优雅的添加水印及去除水印
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
在最近接手的一个项目中,需要对整个页面加上一个水印,还需要动态修改增加背景色功能。由于使用的第三方库不支持背景色功能,故记录一下。文末会附上如何利用技术手段去除水印
第三方库:watermark-plus
主要使用步骤
npm i watermark-plus
import WaterMark from 'watermark-plus'
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库实现水印的原理,只有了解其中的原理才能对症下药
- 使用canvas把用户传入的内容绘制出来
- 使用toDataURL将Canvas图像转换对应的data URI(base64)
- 动态创建两个div元素,设置相对应的css属性
- 监听body下的dom元素变化(MutationObserver),如果修改或被移除的Nodes第一个元素是当前水印元素时会重新生成水印
背景色实现
- 在构造函数中处理background参数
- 使用canvas的fillStyle和fillRect增加背景色功能
- (o.fillStyle = t.background), o.fillRect(0, 0, t.width, t.height),
- 本人是基于打包后源码修改,所以代码看起来可能有点怪
最终背景色能够成功展示
如何去除基于watermark-plus库生成的水印
因为该库监听的body的dom变动,所以单纯的去利用css去隐藏水印是行不通的,它会重新生成水印元素
可以利用源码中的逻辑判断绕过重新生成逻辑
只需要让removedNodes的第一个元素不是水印元素就可以了
以下是实现去除水印的测试代码(水印元素默认被body元素appendChild)
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直接改写逻辑,这对打断点技术要求有点高,也可以尝试一下。