摘要：需求為了防止截圖等安全問題，在項(xiàng)目頁(yè)面中生成一個(gè)平鋪全屏的水印要求水印內(nèi)容為用戶名，水印節(jié)點(diǎn)用戶不能通過開發(fā)者工具等刪除效果如上圖在節(jié)點(diǎn)下插入水印節(jié)點(diǎn)，水印節(jié)點(diǎn)覆蓋在頁(yè)面最上層但不影響頁(yè)面正常操作在通過或者用戶通過開發(fā)者工具刪除或修改水印節(jié)

為了防止截圖等安全問題，在web項(xiàng)目頁(yè)面中生成一個(gè)平鋪全屏的水印

要求水印內(nèi)容為用戶名，水印節(jié)點(diǎn)用戶不能通過開發(fā)者工具等刪除

如上圖

在body節(jié)點(diǎn)下插入水印DOM節(jié)點(diǎn)，水印節(jié)點(diǎn)覆蓋在頁(yè)面最上層但不影響頁(yè)面正常操作

在通過js或者用戶通過開發(fā)者工具刪除或修改水印節(jié)點(diǎn)時(shí)自動(dòng)復(fù)原

通過canvas畫出節(jié)點(diǎn)需生成水印的文字生成base64圖片

生成該水印背景圖的div節(jié)點(diǎn)插入到body下，通過jsMutationObserver方法監(jiān)聽節(jié)點(diǎn)變化，再自動(dòng)重新生成

生成水印DOM節(jié)點(diǎn)

// 生成水印DOM節(jié)點(diǎn)    
init () {
      let canvas = document.createElement("canvas")
      canvas.id = "canvas"
      canvas.width = "200" // 單個(gè)水印的寬高
      canvas.height = "130"
      this.maskDiv = document.createElement("div")
      let ctx = canvas.getContext("2d")
      ctx.font = "normal 18px Microsoft Yahei" // 設(shè)置樣式
      ctx.fillStyle = "rgba(112, 113, 114, 0.1)" // 水印字體顏色
      ctx.rotate(30 * Math.PI / 180) // 水印偏轉(zhuǎn)角度
      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 + ")"
      // 水印節(jié)點(diǎn)插到body下
      document.body.appendChild(this.maskDiv)
    },

監(jiān)聽DOM更改

// 監(jiān)聽更改，更改后執(zhí)行callback回調(diào)函數(shù)，會(huì)得到一個(gè)相關(guān)信息的參數(shù)對(duì)象
    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) // 監(jiān)聽body節(jié)點(diǎn)
    },

直接引入項(xiàng)目任何組件中使用即可

組件prop接收三個(gè)參數(shù)

  props: {
    // 顯示的水印文本
    inputText: {
      type: String,
      default: "waterMark水印"
    },
    // 是否允許通過js或開發(fā)者工具等途徑修改水印DOM節(jié)點(diǎn)（水印的id，attribute屬性，節(jié)點(diǎn)的刪除）
    // true為允許，默認(rèn)不允許
    inputAllowDele: {
      type: Boolean,
      default: false
    },
    // 是否在組件銷毀時(shí)去除水印節(jié)點(diǎn)（前提是允許用戶修改DOM，否則去除后會(huì)再次自動(dòng)生成）
    // true會(huì)，默認(rèn)不會(huì)
    inputDestroy: {
      type: Boolean,
      default: false
    }
  }

inputText（String）：需要生成的水印文本，默認(rèn)為"waterMark水印"

inputAllowDele（Boolean）：是否需要允許用戶刪除水印DOM節(jié)點(diǎn)，true為允許，默認(rèn)不允許

inputDestroy（Boolean）：是否在組件銷毀時(shí)去除水印節(jié)點(diǎn)，true會(huì)，默認(rèn)不會(huì)，（只有在inputAllowDele為ftrue時(shí)才能生效）

如果需要修改水印大小，文字，顏色等樣式，可直接進(jìn)入組件中按注釋修改

工作寫了個(gè)相關(guān)組件，復(fù)用率挺高就封裝了下，沒有經(jīng)過嚴(yán)格測(cè)試，可當(dāng)做參考使用,有需要的朋友歡迎下載源碼使用相關(guān)GitHub代碼

當(dāng)然在瀏覽器端無論怎樣也不能完全防止用戶的的行為，但也能滿足多數(shù)需求場(chǎng)景