如何用vue封装一个防用户删除的平铺页面的水印组件

摘要：需求为了防止截图等安全问题，在项目页面中生成一个平铺全屏的水印要求水印内容为用户名，水印节点用户不能通过开发者工具等删除效果如上图在节点下插入水印节点，水印节点覆盖在页面最上层但不影响页面正常操作在通过或者用户通过开发者工具删除或修改水印节

为了防止截图等安全问题，在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代码

当然在浏览器端无论怎样也不能完全防止用户的的行为，但也能满足多数需求场景