需求为了防止截图等安全问题，在web项目页面生成平铺全屏水印，要求水印内容为用户名，水印节点用户不能通过开发者工具删除效果等。在上图中的body节点下插入watermarkDOM节点，watermark节点覆盖在页面顶层但不影响页面正常运行。通过js或用户通过开发者工具删除或修改水印节点时自动恢复的原理通过canvas绘制节点生成水印的文字生成base64图片生成水印背景图片的divbody下插入节点，通过jsMutationObserver方法监听节点变化，然后自动重新生成水印DOM节点//生成水印DOM节点init(){letcanvas=document.createElement('canvas')canvas.id='canvas'canvas.width='200'//单个水印的宽高canvas.height='130'this.maskDiv=document.createElement('div')letctx=canvas.getContext('2d')ctx.font='normal18pxMicrosoftYahei'//设置样式ctx.fillStyle='rgba(112,113,114,0.1)'//水印字体颜色ctx.rotate(30*Math.PI/180)//水印偏转角度ctx.fillText(this.inputText,30,20)letsrc=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(){letbody=document.getElementsByTagName('body')[0]letoptions={childList:true,attributes:true,characterData:true,subtree:true,attributeOldValue:true,characterDataOldValue:true}让observer=newMutationObserver(this.callback)observer.observe(body,options)//监听body节点}，直接使用到项目的任意组件中使用即可。组件prop接收三个参数props:{//显示的水印文本inputText:{type:String,default:'waterMarkwatermark'},//是否允许通过js或开发者工具修改水印DOM节点(watermarkid,attribute属性,节点删除)//true允许，默认不允许inputAllowDele:{type:Boolean,default:false},//组件销毁时是否删除水印节点（前提是用户允许修改DOM，否则会又自动生成了）//true，默认不是users删除水印DOM节点，true是允许的，默认是不允许的需要修改水印大小、文字、颜色等样式，可以直接进入组件，根据评论修改总结作品。我写了一个相关的组件。复用率挺高的，而且是打包的。没有经过严格测试，可以作为参考。欢迎有需要的朋友下载源码使用。当然，GitHub代码并不能完全阻止用户在浏览器端的行为，但也能满足大部分需求场景
