如何用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代碼

• 固然在瀏覽器端不管怎樣也不能徹底防止用戶的的行爲，但也能知足多數需求場景