--- theme: smartblue highlight: a11y-dark --- 大家好，我是渡一前端子辰老师。今天再给大家带来一个“狠活儿” 我们在平时上网的时候会看到有些图片是加水印的：

像这种加水印的操作往往是后端来做的，不过有些站点要保护的知识产权类型比较多，不光是图片，可能还有视频或者文字。对不同类型的东西去加这个水印，后端操作起来就可能比较麻烦，因为水印这个东西防君子不防小人，他要搞你的话始终能搞你。所以我们水印的作用，就是给他做一个适当的限制，让他没有那么轻易的能搞到。因此现在有些站点开始逐步的让前端来制作这个水印了。如果你是用的是 React 来开发的话就比较简单了：

这个 Ant Design 这个库，它本身就有一个组件叫做 Watermark 水印组件，通过这个组件就可以给一个区域加上一个水印，非常的 so easy 开发成本极低，无论这个区域是图片还是文字或者视频，都无所谓。但是如果你使用的是 Vue 来开发的话很遗憾，无论是 Element UI 还是 Ant Design Vue，都没有这个 Watermark 组件。那么就需要我们自己手动的去编写，其实编写这个组件也并不复杂，主要是要考虑两个问题： 1. 如何来生成水印 2. 如何来防止篡改 # 如何生成水印我们先来看第一步如何生成水印。 ## 基本思路与准备我们可以有这么一个思路：

比如我们要在上图的区域做水印，那么就在区域里加上一个 div，div 填充满整个区域，然后给这个 div 一张水印的背景图，然后让背景图重复就可以了。这个背景图我们可以使用 canvas 来画。所以基于这么一个思路，我们就可以写出这么一个代码结构：

我们引入封装的 Watermark 组件，里边传入任何内容，可以是文字也可以是视频，然后就给这个区域加上水印。通过 text 传入水印的文本。那么我们看看组件里咋写的： ```html ``` 目前组件的代码还是比较简单，我们看一下 useWatermarkBg 返回的数据是什么：

这里打印了两个对象，是因为我们有两个水印区域，这个对象里有三个属性： > base64：表示 canvas 生成图片的 dataurl，到时候就可以用它来做背景 > size：表示 canvas 的宽高 > styleSize：表示 canvas 的 DPR，如果想要用非常清晰的尺寸的话就用这个，这个值和 window 的devicePixelRatio 有关，如果你不知道的话可以关注子辰，后期会更新相关的文章。那么我们看看 useWatermarkBg 函数是怎么写的，代码也很简单： ```js import { computed } from 'vue'; export default function useWatermarkBg (props) { return computed(() => { // 创建一个 canvas const canvas = document.createElement('canvas'); const devicePixelRatio = window.devicePixelRatio || 1; // 设置字体大小 const fontSize = props.fontSize * devicePixelRatio; const font = fontSize + 'px serif'; const ctx = canvas.getContext('2d'); // 获取文字宽度 ctx.font = font; const { width } = ctx.measureText(props.text); const canvasSize = Math.max(100, width) + props.gap * devicePixelRatio; canvas.width = canvasSize; canvas.height = canvasSize; ctx.translate(canvas.width / 2, canvas.height / 2); // 旋转 45 度让文字变倾斜 ctx.rotate((Math.PI / 180) * -45); ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; ctx.font = font; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; // 将文字画出来 ctx.fillText(props.text, 0, 0); return { base64: canvas.toDataURL(), size: canvasSize, styleSize: canvasSize / devicePixelRatio, }; }); } ``` 现在基本的数据有了，我们就要生成一个水印的背景的 div，填充在合适的位置。 ## 生成水印填充背景 ```html ``` 我们这里使用 `document.createElement` 生成一个 div，有同学可能会问，为什么不直接在填充的位置写一个 div 呢？因为不行，至于为什么不行看到后边就知道了，在最后进行解释，现在就使用 dom 来创建这个 div。现在呢我们给这个 div 设置一些样式： ```html ``` 样式我们也只能通过上面的方式来添加，而不能直接写成 class，具体原因后边会解释。接下来我们要把这个 div 添加到父元素里边去： ```html ``` 你可以会发现我们这里使用的是 watchEffect 来判断是否能获取到父元素，而不是在 onMounted 里边，这是因为这一块会涉及到后边的防篡改，我们一会就知道了，现在暂且不用管就放在这里。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/439372c53998468f9bb2f67daf125cc2~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=937\&s=473798\&e=png\&b=f9f6f6) 可以看到 div 已经被添加进去了，背景图以及属性都是有的，只不过这个 div 不是绝对定位，要填充满的话就得设置绝对定位： ```html ```

你看，现在这个水印就加上了，没有什么问题，那么第一步加水印就完成了。接下来我们就要说第二步了，如何防篡改。 # 如何防篡改用户会怎么来篡改我们的水印呢？他有很多办法，直接在页面上操作不太可能，他主要的办法就是进入这个浏览器调试工具，找到我们这个水印的 div 然后删除：

这样一删除就没了，所以我们仅仅是把这个水印生成出来毫无意义，因为可以轻松的删除。那这就要求我们必须要找到某一种方式，能够监控用户对我们水印元素的操作，比如说删除。所以这个防篡改就涉及到两件事： 1. 如何监控 2. 重新生成这就解释清楚了为什么不直接在父元素里写 div 的原因，因为直接在父元素里写的话如果删除掉的话无法重新生成，但是通过 document 添加的话就可以。把 div 放在 watchEffect 里边只要监控到用户动了水印，只要在执行一遍 watchEffect 就能重新生成一个新的水印添加进去。如果说我们不是在 watchEffect 里还是在 onMounted 里就没办法那做到重新运行了。同时也解释了为什么样式不能写在 class 里，因为在 calss 里的话，用户通过调试工具更改的话，我们同样无法监控到。好了，刚才的三个疑问现在都解决了。 ## 如何监控现在的问题就是我们如何去监控的问题了，我们怎么知道用户动了水印呢？那么这里就要说到一个 API 了，叫做 [MutationObserve](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver) 它可以监控一个元素的变化，不仅可以监控元素本事，还可以监控元素里边所有的子元素，无论是改动元素的属性，还是元素的内容，这个 API 都可以收到通知。我们现在就利用这会 API 来实现监控，首先我们要搞清楚的是，到底要监控谁，我们要监控的不是水印的 div，而是整个组件，这样就可以监控到所有的东西了。所以我们可以这样写： ```html ``` 现在我们就基本设置好了，看一下效果如何：

在最开始的时候就打印了两次，因为我们添加了两次水印的 div，加这个 div 的动作就被监听到了。返回值是一个数组，表示我们的操作动作，动作里边也明确的表示是添加节点，并且是 div 节点。

如果我们删除水印的 div，同样也触发了我们的回调函数，动作也记录到了我们删除了一个 div 的节点。通过对动作的了解我们就可以知道如何来监控节点的删除，获取到删除的节点并且与我们添加的节点对比，就知道用户是否删除了我们的水印节点，我们就可以这样来写： ```html ```

水印删除后事件就被触发了。

属性被修改时同样会触发事件。 ## 重新生成那么我们能监控到事件了如何重新运行 watchEffect 呢？因为 watchEffect 是收集依赖的，只要依赖变化了它就会重新运行，所以我们可以手动搞一个依赖： ```html ``` 这样就可以完成了，只要监控到删除或者修改属性，就会重新运行 watchEffect 重新生成一个新的水印：

# 总结水印是一种保护知识产权的手段，但是如果只是简单的生成水印，很容易被用户篡改或删除。所以我们需要使用一些技巧来防止水印被破坏，比如使用 canvas 生成背景图，使用 document.createElement 添加水印元素，使用 MutationObserver 监控元素变化，使用 watchEffect 重新生成水印等。这样我们就可以实现一个比较安全的水印组件，提高我们的网站的安全性和可信度。像 Ant Design 里边的水印就是这样做的，沿着这个思路我们就可以一步一步的把这个组件给它完善掉。 # 本文来源本文来源自渡一公众号:**Duing**，欢迎关注，获取**超新**、**超深入**的技术讲解感谢你阅读本文，如果你有任何疑问或建议，请在评论区留言，如果你觉得这篇文章有用，请点赞收藏或分享给你的朋友！