MutationObserver在頁面水印實(shí)現(xiàn)起到的作用是什么

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

實(shí)現(xiàn)水印

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

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
  // 創(chuàng)建一個(gè)canvas標(biāo)簽
  const canvas = document.getElementById(canvasId) as HTMLCanvasElement
  // 如果已有則不再創(chuàng)建
  const can = canvas || document.createElement('canvas')
  can.id = canvasId
  el.appendChild(can)
  // 設(shè)置寬高
  can.width = 400
  can.height = 200
  // 不可見
  can.style.display = 'none'
  const ctx = can.getContext('2d')!
  // 設(shè)置畫布的樣式
  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
  // 設(shè)置容器的屬性樣式
  // 將剛剛生成的canvas內(nèi)容轉(zhuǎn)成圖片，并賦值給容器的 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)
  // 將水印容器放到目標(biāo)元素下
  el.appendChild(waterMaskDiv)
  return styleStr
}
const watermarkDirective: Directive = {
  mounted(el, { value }) {
    // 接收styleStr，后面可以用來對(duì)比
    el.waterMarkStylestr = drawWatermark(el, value)
  }
}

使用的時(shí)候直接以v-watermark來使用：

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

得到的效果如下：

惡意修改

咱們完成了水印功能，但是咱們來想一想，水印有啥用？或者說我們?yōu)槭裁匆o一個(gè)頁面加水印呢？答案就是：防偽

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

• 第一步：創(chuàng)建個(gè)canvas且畫好水印

• 第二步：創(chuàng)建個(gè)水印容器div標(biāo)簽

• 第三步：將canvas畫布轉(zhuǎn)圖片鏈接，賦值給div標(biāo)簽的background-image樣式屬性

• 第四步：將水印容器div放到目標(biāo)元素之下

看似完成了水印功能，但是其實(shí)破綻百出?。?！比如：

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

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

如果一切別有用心的人做了這兩件事，這都會(huì)導(dǎo)致我們頁面上剛剛所做的水印直接消失?。。?/p>

所以咱們得監(jiān)控這些人的惡意行為，那咋做呢？MutationObserver出場了?。?！

MutationObserver

MutationObserver的具體用法大家可以去MDN上看，這里我就簡言意駭?shù)卣f一下他的作用：監(jiān)控DOM元素的變化

是的，它的作用就是：監(jiān)控DOM元素的變化，所以他能阻止那些惡意用戶破壞水印，因?yàn)槲覀儎倓傉f了，惡意用戶可以使用以下兩種方法進(jìn)行破壞水印：

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

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

而這兩點(diǎn)都涉及到DOM的修改，所以都會(huì)引起MutationObserver的監(jiān)控觸發(fā)，所以咱們可以利用MutationObserevr來監(jiān)控。這里用到它的實(shí)例的兩個(gè)方法：

• observe：開啟監(jiān)控DOM變化

• disconnect：停止監(jiān)控DOM變化

const watermarkDirective: Directive = {
  mounted(el, { value }) {
    // 接收styleStr，后面可以用來對(duì)比
    el.waterMarkStylestr = drawWatermark(el, value)
    // 先定義一個(gè)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)
        }
      }
    })
    // 啟動(dòng)監(jiān)控
    el.observer.observe(document.body, {
      childList: true,
      attributes: true,
      subtree: true,
    })
  },
  unmounted(el) {
    // 指定元素銷毀時(shí)，記得停止監(jiān)控
    el.observer.disconnect()
    el.observer = null
  },
}

到此，關(guān)于“MutationObserver在頁面水印實(shí)現(xiàn)起到的作用是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！