关于javascript:实现页面水印到底跟MutationObserver有什么关系

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点 是我的座右铭，根底是进阶的前提 是我的初心

背景

大家平时在开发中或者在面试中，不免都会遇到一个问题——给页面加水印，其实这并不难，然而也是有一些留神点的，所以说看似简略的性能，要尽力做到：

• 1、严谨性
• 2、安全性

实现水印

其实实现水印并不难，只须要利用 自定义指令 + 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 的具体用法大家能够去 CDN 上看，这里我就简言意骇地说一下他的作用：监控 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
  },
}

当初，你批改 style 或者 删除容器 div ，都会从新生成水印，这样歹意用户就无奈未遂啦！！！当然可能还有破绽，大家能够给给倡议！！

结语

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】