需求
- 为了防止截图等安全问题，在web项目页面中生成一个平铺全屏的水印
- 要求水印内容为用户名，水印节点用户不能通过开发者工具等删除
效果
- 如上图
- 在
body节点下插入水印DOM节点，水印节点覆盖在页面最上层但不影响页面正常操作 - 在通过js或者用户通过开发者工具删除或修改水印节点时自动复原
原理
- 通过
canvas画出节点需生成水印的文字生成base64图片 - 生成该水印背景图的div节点插入到body下，通过js
MutationObserver方法监听节点变化，再自动重新生成
生成水印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代码
- 当然在浏览器端无论怎样也不能完全防止用户的的行为，但也能满足多数需求场景
