Vue3问题:如何在页面上添加水印?

发布网友发布时间：2024-10-01 18:24

共1个回答

热心网友时间：2024-10-17 13:38

为了防止网站信息被盗用及维护版权标识，常常在页面、图片或视频上添加水印。本文将分两种情况来说明如何在页面上添加水印，一种是仅添加水印，另一种是在添加水印的同时，还要防止用户恶意篡改。

对于仅添加水印的情况，可以直接使用第三方UI库中的水印组件，如ElementPlus 2.4.0中的Watermark水印组件。实现代码简单，效果直观。但若需要添加防篡改功能，则需要使用原生js的写法，通过Canvas绘制水印图像，并利用MutationObserver对象监听DOM节点或其子节点的变化。具体实现包括创建一个hook函数`useWatermarkBg`用于绘制水印图像，封装一个水印公共组件`WaterMark`用于添加水印和防篡改处理。在组件的`mounted`生命周期钩子中，创建`MutationObserver`实例，监听水印DOM节点的变化，并在节点删除或属性修改时设置依赖，发出重新添加水印的通知。在`watchEffect`中收集依赖，只要依赖变化，就重新添加水印图像，以达到防篡改效果。同时，使用CSS的`pointerEvents`属性设置为`none`，使元素不会接收鼠标事件，防止篡改。

实现上述功能的代码如下：

hook函数`useWatermarkBg`：在其中用Canvas绘制水印图像。
水印公共组件`WaterMark`：调用`useWatermarkBg`函数生成水印图像，并在组件中添加水印，进行防篡改处理。
在`mounted`中，创建`MutationObserver`实例，监听水印DOM节点的变化。
在`watchEffect`中收集依赖，根据依赖变化重新添加水印图像。

在页面中添加水印时，使用`WaterMark`组件即可。

本文还对`MutationObserver`进行了详细解释，`MutationObserver`允许开发者注册回调函数，当DOM树发生变化时触发回调函数。在监测过程中，可以收集DOM树的变化信息，并在需要时执行相应的操作。本文还介绍了`pointer-events`CSS属性，它控制元素对鼠标事件的响应方式，通过将其设置为`none`，可以使元素在外观上可见，但不会干扰下层元素的交互。

最后，感谢关注微信公众号：“程序员大澈”，并加入问答群，让我们共同解决问题，不再孤单。