Vue2/Vue3实现全局/局部添加防篡改水印的效果。删除元素无效！更改元素属性无效！支持图片、元素、视频等等。

周bro

已于 2024-07-11 20:43:38 修改

阅读量758

点赞数 3

文章标签： vue.js 前端 javascript ui vue

于 2024-07-11 11:00:37 首次发布

本文链接：https://blog.csdn.net/weixin_46631078/article/details/140345553

版权

水印目的

身份识别：水印可以用作作者或品牌的标识符，使观众能够轻松识别内容的来源。这对于在社交媒体上分享内容或在网络上发布作品的个人、摄影师、设计师或公司来说尤为重要。

品牌宣传：水印可以帮助提升品牌知名度和曝光度。通过在图片或视频中添加品牌标识，品牌可以在内容被分享或传播时获得额外的宣传效果。

内容跟踪：通过在内容中添加水印，可以跟踪内容的传播和使用情况。这对于了解内容在网络上的传播路径、受众和影响力等信息是有帮助的。

Api介绍

MutationObserver API 是 Web API 的一部分，用于监视 DOM 树的变化。它允许开发者注册一个回调函数，该函数在指定的 DOM 节点或子树发生变化时被调用。MutationObserver 是一个强大的工具，可以用于监视并响应 DOM 中的变化，而无需使用传统的事件监听器。

主要的组成部分包括：

MutationObserver 对象：用于观察 DOM 树的变化。通过创建 MutationObserver 的实例并传入一个回调函数，可以开始监视指定节点或节点集合的变化。

观察目标：要监视的 DOM 节点或节点集合。MutationObserver 可以观察单个节点、节点列表，甚至整个文档的变化。

回调函数：MutationObserver 注册的回调函数在观察的节点发生变化时被调用。回调函数接收一个 MutationRecord 对象数组作为参数，该数组包含描述每个变化的信息。

变化记录（MutationRecord）：描述 DOM 变化的对象。每个 MutationRecord 包含有关变化类型、受影响的节点、以及相关信息的详细信息。

MutationObserver API 的使用场景包括但不限于：

监视 DOM 中特定元素的属性变化。
监视子节点的添加、移除或替换。
监视文本内容的变化。
实时监视动态加载的内容变化。

实现逻辑：

1、通过手写组件的方式，将需要添加水印的内容放入组件内

2、通过props传入不同内容，实现自定义水印内容、字体大小、水印之间的间隔等等

3、通过canvas来画出水印文字，最后将canvas画出的内容转换为图片

4、通过MutationObserverAPI来监听水印元素被删除、被修改属性的变化

先上结果图片：

代码讲解在vue3版本中

Vue2版本：

代码：watermark组件

<template>
  <div class="watermark" ref="parent">
    <slot></slot>
  </div>
</template>
<script>

export default {
  props: {
    // 传入的水印文字
    text: {
      type: String,
      required: true,
    },
    // 传入的文字大小
    fontSize: {
      type: Number,
      default: 32,
    },
    // 传入的文字间距
    gap: {
      type: Number,
      default: 50,
    },
    // 传入的文字颜色
    fillStyle:{
      type: String,
      default:'rgba(0,0,0,0.3)'
    }
    
  },
  data() {
    return {
      parent: null,
      div: null,
      observer: null,
    }
  },
  computed: {
    watermarkBg() {
      const canvas = document.createElement('canva