&

十萬火急，客戶數據被截圖泄密了，緊急需求加水印...

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2025年4月12日 10:12 本文熱度 264

項目經理老王：?? 緊急加需求！ 現在水印不僅要全頁面覆蓋，還要遍布每個角落！用戶就算截個按鈕局部圖，也得帶著水印！代碼必須給全，從生成到防護一條龍！B端產品必須要全加水印，快快快...

碼農小彬：?? 沒問題！上完整解決方案！
直接甩出完整代碼+原理分析??

?? 全頁面動態水印（Vue3 + Canvas + 防刪監控）

? 核心目標

全頁面密集水印 —— 無論用戶截取哪部分頁面，必帶水印
動態綁定用戶信息 —— 顯示機密-{用戶名}-{時間}
防刪除/隱藏 —— 監聽DOM變動自動恢復
零操作干擾 —— 透明+事件穿透

?? 完整代碼實現

1. 水印生成組件 `Watermark.vue`

這個代碼就是給整個網頁打上帶用戶信息和時間的透明水印，刪不掉還自動更新，防截圖防篡改。

<template>
  <!-- 水印層（覆蓋整個視口） -->
  <div ref="watermarkEl" class="global-watermark"></div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
  text: { type: String, default: '內部保密' },  // 基礎文本
  userId: { type: String },                    // 綁定用戶ID
  opacity: { type: Number, default: 0.1 },     // 透明度
  density: { type: Number, default: 150 },     // 水印密度（像素間隔）
});

const watermarkEl = ref(null);

// ?? 動態生成水印圖（Canvas繪制）
const generateWatermark = () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const size = props.density; // 水印單元間距
  
  canvas.width = size * 2;
  canvas.height = size * 2;
  
  ctx.font = '14px Arial';
  ctx.fillStyle = `rgba(100, 100, 100, ${props.opacity})`;
  ctx.rotate(-25 * Math.PI / 180); // 傾斜25度
  
  // 填充文本（含動態用戶信息+時間）
  const dynamicText = `${props.text} - ${props.userId || '未知用戶'} - ${new Date().toLocaleString()}`;
  ctx.fillText(dynamicText, 10, size);
  
  return canvas.toDataURL('image/png');
};

// ?? 更新水印背景
const updateWatermark = () => {
  if (!watermarkEl.value) return;
  watermarkEl.value.style.backgroundImage = `url(${generateWatermark()})`;
};

// ?? 監聽文本/用戶ID變化
watch([() => props.text, () => props.userId], updateWatermark);

// ??? 防刪除監聽（MutationObserver）
const initObserver = () => {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.removedNodes.length) {
        const removed = Array.from(mutation.removedNodes);
        if (removed.some(node => node === watermarkEl.value)) {
          document.body.appendChild(watermarkEl.value); // 強制恢復水印
          console.warn('?? 檢測到水印被移除，已自動恢復！');
        }
      }
    });
  });
  
  observer.observe(document.body, { childList: true, subtree: true });
};

onMounted(() => {
  updateWatermark();
  initObserver();
});
</script>

<style scoped>
.global-watermark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-repeat: repeat; /* 關鍵！重復鋪滿 */
  pointer-events: none;      /* 穿透點擊 */
  z-index: 9999;            /* 確保在最頂層 */
  opacity: v-bind('props.opacity');
}
</style>

2. 在管理后臺入口調用

呃...這個代碼大概就是在網頁最外層加了個半透明的水印，寫著"機密數據"，還綁定了當前登錄用戶的ID，然后下面正常顯示網頁的其他內容這樣子！

<template>
  <div id="app">
    <!-- 全屏水印（綁定當前用戶） -->
    <Watermark 
      text="機密數據" 
      :userId="currentUser.id" 
      :opacity="0.15" 
      :density="120" 
    />
    <router-view /> <!-- 其他頁面內容 -->
  </div>
</template>

<script setup>
import Watermark from '@/components/Watermark.vue';
import { useAuthStore } from '@/stores/auth';

const currentUser = useAuthStore().user; // 假設從Pinia獲取用戶
</script>

??? 增強防護

1. 禁用開發者工具（可選）

這個代碼就是...如果有人想按F12或者Ctrl+Shift+I打開瀏覽器開發者工具，網頁就會彈窗警告。

// 在main.js中添加
document.addEventListener('keydown', (e) => {
  if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I')) {
    e.preventDefault();
    alert('禁止開發者工具！');
  }
});

2. 動態水印刷新（防截圖拼接）

這個代碼就是...讓水印每隔1小時變一次！

// 每小時更新一次水印時間戳
setInterval(() => {
  updateWatermark();
}, 60 * 60 * 1000);

?? 關鍵點說明

特性	實現方式	效果
全頁面覆蓋	`background-repeat: repeat`	無論頁面多大，水印無限平鋪
動態內容	綁定`userId`+`時間戳`	每個用戶水印唯一，可追溯
防刪除	`MutationObserver`監聽DOM	刪除后自動重新插入
操作無阻	`pointer-events: none`	可點擊下方按鈕/輸入框

?? 注意事項

性能優化：水印密度（density）建議≥100px，避免Canvas渲染壓力
移動端適配：測試100vh在移動端的表現，必要時改用window.innerHeight
有時候可能還需要后端做一些操作，前端水印顯示用戶ID和時間，后端同時記錄操作日志，一旦泄露就能通過水印信息查后端日志精準定位責任人（就像快遞面單+物流系統，撕掉面單也能通過系統查誰寄的）。