前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，根底是进阶的前提是我的初心
背景
大家平时在开发中或者在面试中，不免都会遇到一个问题——给页面加水印，其实这并不难，然而也是有一些留神点的，所以说看似简略的性能，要尽力做到：
- 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 ，都会从新生成水印，这样歹意用户就无奈未遂啦！！！当然可能还有破绽，大家能够给给倡议！！
结语
我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】