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

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

第三方库: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库实现水印的原理,只有了解其中的原理才能对症下药

  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)

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直接改写逻辑,这对打断点技术要求有点高,也可以尝试一下。

原文链接:https://juejin.cn/post/7357994849385693236 作者:合肥炒面不好吃

(0)
上一篇 2024年4月16日 下午5:04
下一篇 2024年4月16日 下午5:14

相关推荐

发表回复

登录后才能评论