MutationObserver在頁面水印實現起到的作用是什么

這篇文章主要介紹“MutationObserver在頁面水印實現起到的作用是什么”，在日常操作中，相信很多人在MutationObserver在頁面水印實現起到的作用是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”MutationObserver在頁面水印實現起到的作用是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

實現水印

其實實現水印并不難，只需要利用自定義指令 + canvas + background-image即可，實現起來也非常方便：

import type { Directive, App } from 'vue'
interface Value {
  font?: string
  textColor?: string
  text?: string
}
const waterMarkId = 'waterMark'
const canvasId = 'can'
const drawWatermark = (el, value: Value) => {
  const {
    font = '16px Microsoft JhengHei',
    textColor = 'rgba(180, 180, 180, 0.3)',
    text = '三心大菜鳥',
  } = value
  // 創建一個canvas標簽
  const canvas = document.getElementById(canvasId) as HTMLCanvasElement
  // 如果已有則不再創建
  const can = canvas || document.createElement('canvas')
  can.id = canvasId
  el.appendChild(can)
  // 設置寬高
  can.width = 400
  can.height = 200
  // 不可見
  can.style.display = 'none'
  const ctx = can.getContext('2d')!
  // 設置畫布的樣式
  ctx.rotate((-20 * Math.PI) / 180)
  ctx.font = font
  ctx.fillStyle = textColor
  ctx.textAlign = 'left'
  ctx.textBaseline = 'middle'
  ctx.fillText(text, can.width / 3, can.height / 2)
  // 水印容器
  const waterMaskDiv = document.createElement('div')
  waterMaskDiv.id = waterMarkId
  // 設置容器的屬性樣式
  // 將剛剛生成的canvas內容轉成圖片，并賦值給容器的 background-image 樣式
  const styleStr = `
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: url(${can.toDataURL('image/png')})
  `
  waterMaskDiv.setAttribute('style', styleStr)
  // 將水印容器放到目標元素下
  el.appendChild(waterMaskDiv)
  return styleStr
}
const watermarkDirective: Directive = {
  mounted(el, { value }) {
    // 接收styleStr，后面可以用來對比
    el.waterMarkStylestr = drawWatermark(el, value)
  }
}

使用的時候直接以v-watermark來使用：

<div 
    v-watermark="
    { 
    text: '水印名稱',
    textColor: 'rgba(180, 180, 180, 0.3)' 
    }
    "
  >

得到的效果如下：

惡意修改

咱們完成了水印功能，但是咱們來想一想，水印有啥用？或者說我們為什么要給一個頁面加水印呢？答案就是：防偽

是的，我們的水印是用來防偽的，但是像我們剛剛那么做真的能防偽嗎？我們回憶一下我們剛剛的加水印思路：

• 第一步：創建個canvas且畫好水印

• 第二步：創建個水印容器div標簽

• 第三步：將canvas畫布轉圖片鏈接，賦值給div標簽的background-image樣式屬性

• 第四步：將水印容器div放到目標元素之下

看似完成了水印功能，但是其實破綻百出！！！比如：

• 1、審查元素修改容器div的background-image屬性為空

• 2、審查元素把容器div給刪掉

如果一切別有用心的人做了這兩件事，這都會導致我們頁面上剛剛所做的水印直接消失！！！

所以咱們得監控這些人的惡意行為，那咋做呢？MutationObserver出場了！！！

MutationObserver

MutationObserver的具體用法大家可以去MDN上看，這里我就簡言意駭地說一下他的作用：監控DOM元素的變化

是的，它的作用就是：監控DOM元素的變化，所以他能阻止那些惡意用戶破壞水印，因為我們剛剛說了，惡意用戶可以使用以下兩種方法進行破壞水印：

• 1、審查元素修改容器div的background-image屬性為空

• 2、審查元素把容器div給刪掉

而這兩點都涉及到DOM的修改，所以都會引起MutationObserver的監控觸發，所以咱們可以利用MutationObserevr來監控。這里用到它的實例的兩個方法：

• observe：開啟監控DOM變化

• disconnect：停止監控DOM變化

const watermarkDirective: Directive = {
  mounted(el, { value }) {
    // 接收styleStr，后面可以用來對比
    el.waterMarkStylestr = drawWatermark(el, value)
    // 先定義一個MutationObserver
    el.observer = new MutationObserver(() => {
      const instance = document.getElementById(waterMarkId)
      const style = instance?.getAttribute('style')
      const { waterMarkStylestr } = el
      // 修改樣式 || 刪除div
      if ((instance && style !== waterMarkStylestr) || !instance) {
        if (instance) {
          // div還在，說明只是修改style
          instance.setAttribute('style', waterMarkStylestr)
        } else {
          // div不在，說明刪除了div
          drawWatermark(el, value)
        }
      }
    })
    // 啟動監控
    el.observer.observe(document.body, {
      childList: true,
      attributes: true,
      subtree: true,
    })
  },
  unmounted(el) {
    // 指定元素銷毀時，記得停止監控
    el.observer.disconnect()
    el.observer = null
  },
}

到此，關于“MutationObserver在頁面水印實現起到的作用是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！