需求
为了防止截图等安全问题，在 web 项目页面中生成一个平铺全屏的水印
要求水印内容为用户名，水印节点用户不能通过开发者工具等删除
效果
如上图
在 body 节点下插入水印 DOM 节点，水印节点覆盖在页面最上层但不影响页面正常操作
在通过 js 或者用户通过开发者工具删除或修改水印节点时自动复原
原理
通过 canvas 画出节点需生成水印的文字生成 base64 图片
生成该水印背景图的 div 节点插入到 body 下，通过 jsMutationObserver 方法监听节点变化，再自动重新生成
生成水印 DOM 节点
// 生成水印 DOM 节点
init () {
let canvas = document.createElement(‘canvas’)
canvas.id = ‘canvas’
canvas.width = ‘200’ // 单个水印的宽高
canvas.height = ‘130’
this.maskDiv = document.createElement(‘div’)
let ctx = canvas.getContext(‘2d’)
ctx.font = ‘normal 18px Microsoft Yahei’ // 设置样式
ctx.fillStyle = ‘rgba(112, 113, 114, 0.1)’ // 水印字体颜色
ctx.rotate(30 * Math.PI / 180) // 水印偏转角度
ctx.fillText(this.inputText, 30, 20)
let src = canvas.toDataURL(‘image/png’)
this.maskDiv.style.position = ‘fixed’
this.maskDiv.style.zIndex = ‘9999’
this.maskDiv.id = ‘_waterMark’
this.maskDiv.style.top = ’30px’
this.maskDiv.style.left = ‘0’
this.maskDiv.style.height = ‘100%’
this.maskDiv.style.width = ‘100%’
this.maskDiv.style.pointerEvents = ‘none’
this.maskDiv.style.backgroundImage = ‘URL(‘ + src + ‘)’
// 水印节点插到 body 下
document.body.appendChild(this.maskDiv)
},
监听 DOM 更改
// 监听更改，更改后执行 callback 回调函数，会得到一个相关信息的参数对象
Monitor () {
let body = document.getElementsByTagName(‘body’)[0]
let options = {
childList: true,
attributes: true,
characterData: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true
}
let observer = new MutationObserver(this.callback)
observer.observe(body, options) // 监听 body 节点
},
使用
直接引入项目任何组件中使用即可
组件 prop 接收三个参数
props: {
// 显示的水印文本
inputText: {
type: String,
default: ‘waterMark 水印 ’
},
// 是否允许通过 js 或开发者工具等途径修改水印 DOM 节点（水印的 id，attribute 属性，节点的删除）
// true 为允许，默认不允许
inputAllowDele: {
type: Boolean,
default: false
},
// 是否在组件销毁时去除水印节点（前提是允许用户修改 DOM，否则去除后会再次自动生成）
// true 会，默认不会
inputDestroy: {
type: Boolean,
default: false
}
}
inputText（String）：需要生成的水印文本，默认为 ’waterMark 水印 ’
inputAllowDele（Boolean）：是否需要允许用户删除水印 DOM 节点，true 为允许，默认不允许
inputDestroy（Boolean）：是否在组件销毁时去除水印节点，true 会，默认不会，（只有在 inputAllowDele 为 ftrue 时才能生效）
如果需要修改水印大小，文字，颜色等样式，可直接进入组件中按注释修改
小结
工作写了个相关组件，复用率挺高就封装了下，没有经过严格测试，可当做参考使用有需要的朋友欢迎下载源码使用相关 GitHub 代码