Vue3問題：如何在頁面上添加水印？
1. 需求分析
為了防止網站信息被盜用，以及維護版權標識，常常需要在頁面、圖片或視頻上添加獨特水印，以作區分。
同時，水印的添加不僅僅滿足于添加，有時候還要能防止用戶惡意篡改，時刻保證水印的功效。
所以，這次問題我分為了兩種情況：一種是僅添加水印僅可，另一種是添加水印且要防篡改。
下面我將把實現一一列出。
2. 實現步驟
（1）僅添加水印情況
對于僅需要添加水印的情況，直接使用第三方UI庫中的水印組件即可，簡單快速。
當然，我們也可以選擇自己造輪子，用Canvas來畫，但是對于工作而言，我覺得這樣應該盡量避免。
這里我使用ElementPlus 2.4.0中，新出的Watermark水印組件作為例子。
實現代碼：
<template>
<el-watermark
:width="130"
:height="30"
image="https://element-plus.org/images/element-plus-logo.svg"
>
<div style="height: 500px" />
</el-watermark>
</template>效果如下：
當然要注意的是，ElementPlus的依賴版本一定要是2.4.0之后的。
（2）添加水印且要防篡改情況
像ElementPlus提供的水印組件，是不支持防篡改功能的。
也就是說，如果有用戶通過瀏覽器的控制臺進行元素屬性的修改，是可以把頁面中的水印隱藏的。所以為了安全起見，是很需要做防篡改處理的。
為了保證自定義水印的靈活性，這里我使用了原生js的寫法，并且代碼參考了渡一官方大佬的文章。
簡言之，就是利用Canvas繪制水印圖像，以及利用MutationObserver對象來監聽Dom節點或其子節點的變化以實現防篡改處理。
代碼實現如下：
先寫一個hook函數useWatermarkBg，在其中用Canvas繪制水印圖像。
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,
};
});
}再封裝一個水印公共組件WaterMark，在其中調用useWatermarkBg函數生成水印圖像，以及添加水印、做防篡改處理。
在mounted中，創建MutationObserver實例，監聽水印DOM節點的變化，在節點刪除或屬性修改時設置依賴，發出重新添加水印的通知。
在watchEffect中，進行收集依賴，只要依賴變化了，它就會重新添加水印圖像，達到防篡改效果。
值得一提的是，因為添加水印的原理是給頁面添加一個絕對定位的重復水印背景的div，但是，如果這樣我們就不能點擊div下層的元素了。
所以，這里還用了一個叫pointerEvents的css屬性，設置值為none，從而使元素不會接收鼠標事件，鼠標事件會透過元素傳遞到下層的元素上。
<template>
<div class="watermark-container" ref="parentRef">
<slot></slot>
</div>
</template>
<script setup>
import { onMounted, onUnmounted, ref, watchEffect } from 'vue';
import useWatermarkBg from '@/hooks/useWatermarkBg.js';
const props = defineProps({
text: {
type: String,
required: true,
default: 'watermark',
},
fontSize: {
type: Number,
default: 40,
},
gap: {
type: Number,
default: 20,
},
});
const bg = useWatermarkBg(props);
const parentRef = ref(null);
const flag = ref(0); // 聲明一個依賴
let div;
watchEffect(() => {
flag.value; // 將依賴放在 watchEffect 里
if (!parentRef.value) {
return;
}
if (div) {
div.remove();
}
const { base64, styleSize } = bg.value;
div = document.createElement('div');
div.style.backgroundImage = `url(${base64})`;
div.style.backgroundSize = `${styleSize}px ${styleSize}px`;
div.style.backgroundRepeat = 'repeat';
div.style.zIndex = 9999;
div.style.position = 'absolute';
div.style.inset = 0;
// 元素不會接收鼠標事件，鼠標事件會透過元素傳遞到下層的元素上
div.style.pointerEvents = 'none';
parentRef.value.appendChild(div);
});
// 防篡改處理
let ob;
onMounted(() => {
ob = new MutationObserver((records) => {
for (const record of records) {
for (const dom of record.removedNodes) {
if (dom === div) {
flag.value++; // 刪除節點的時候更新依賴
return;
}
}
if (record.target === div) {
flag.value++; // 修改屬性的時候更新依賴
return;
}
}
});
ob.observe(parentRef.value, {
childList: true,
attributes: true,
subtree: true,
});
});
onUnmounted(() => {
ob && ob.disconnect();
div = null;
});
</script>最后，在需要添加水印的頁面直接使用即可。
<template>
<water-mark>
<video src="@/assets/a.mp4" controls width="500" height="500"></video>
</water-mark>
</template>
<script setup>
import WaterMark from "@/components/WaterMark.vue"
</script>3. 問題詳解
（1）關于MutationObserver總結
MutationObserver 是 JavaScript 中的一個內置對象，它提供了一種監視 DOM（文檔對象模型）樹變化的能力。
MutationObserver 允許開發者注冊一個回調函數，當觀察的 DOM 節點或子節點發生變化時，會觸發這個回調函數。這些變化可以包括節點的添加、移除、屬性的變化、文本內容的改變等。
使用 MutationObserver 可以監視特定的 DOM 元素或整個文檔，并在相關變化發生時執行相應的操作。這對于實時監測頁面變化、自動化測試、實現響應式 UI 等場景非常有用。
下面是一個簡單的示例，演示如何使用 MutationObserver 監測某個元素的子節點變化：
// 目標元素
var targetElement = document.getElementById('target-element');
// 創建一個 MutationObserver 實例
var observer = new MutationObserver(function(mutationsList, observer) {
// 當變化發生時執行的回調函數
for (var mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('子節點發生變化');
console.log(mutation.addedNodes); // 添加的節點列表
console.log(mutation.removedNodes); // 移除的節點列表
}
}
});
// 配置觀察選項
var config = { childList: true };
// 開始觀察目標元素
observer.observe(targetElement, config);在上述示例中，我們首先通過 getElementById 獲取目標元素，然后創建一個 MutationObserver 實例，傳入一個回調函數作為參數。回調函數會在目標元素的子節點發生變化時被調用。我們可以在回調函數中根據 mutationsList 的內容進行相應的處理。在這個示例中，我們只關注子節點的變化，并打印相關信息到控制臺。
最后，我們通過調用 observe 方法來開始觀察目標元素的變化。在 config 對象中，我們將 childList 屬性設置為 true，表示我們要監測子節點的變化。
需要注意的是，MutationObserver 是一個異步的機制，它會在變化發生后才觸發回調函數。這意味著在開始觀察之前的變化可能不會被捕獲到。如果需要在開始觀察之前立即獲取當前狀態的變化，可以在創建 MutationObserver 實例后，使用 observer.takeRecords() 方法來獲取當前的變化記錄。
（2）關于pointer-events的總結
pointer-events 是一種 CSS 屬性，它控制元素對鼠標事件的響應方式。它可以設置在任何 HTML 元素上，并具有以下幾個可能的取值：
- auto：元素對鼠標事件作出默認的響應。即元素會根據自身的樣式和內容對鼠標事件做出適當的響應。
- none：元素對鼠標事件不做出響應。即元素不會接收鼠標事件，鼠標事件會透過元素傳遞到下層的元素上。這相當于將元素變為不可點擊，即使它位于頁面上方或遮擋其他元素。
- visiblePainted：元素對鼠標事件做出響應，但鼠標事件不會穿透元素，而是傳遞到下層的元素上。這意味著元素會接收鼠標事件，但不會阻止下層元素對鼠標事件的響應。
- visibleFill：元素對鼠標事件做出響應，并會阻止鼠標事件傳遞到下層的元素上。這意味著元素會完全接收鼠標事件，并阻止下層元素對鼠標事件的響應。
pointer-events 屬性對于創建交互式的頁面元素非常有用，可以控制元素是否能夠接收和響應鼠標事件。通過將其設置為 none，可以使元素在外觀上可見，但不會干擾下層元素的交互。
需要注意的是，pointer-events 屬性的兼容性有限，可能不支持所有瀏覽器或舊版本的瀏覽器。在使用時，建議先檢查兼容性并提供備用方案或降級策略。
