文章目錄
- 1 明水印技術實現
- 1.1 DOM覆蓋方案
- 1.2 Canvas動態渲染
- 1.3 CSS偽元素方案
- 2 暗水印技術解析
- 2.1 空域LSB算法
- 2.2 頻域傅里葉變換
- 3 防篡改機制設計
- 3.1 MutationObserver防護
- 3.2 Canvas指紋追蹤
- 4 前后端實現對比
- 5 攻防博弈深度分析
- 5.1 常見破解手段
- 5.2 進階防御策略
- 6 選型
近期文章：
- Node.js中那些常用的進程通信方式
- 淺談微前端沙箱機制
- 實現篇：手把手打造一個番茄時鐘
- Vue3響應式原理那些事
- 實現篇：二叉樹遍歷收藏版
- 實現篇：LRU算法的幾種實現
- 從底層視角看requestAnimationFrame的性能增強
- Nginx Upstream了解一下
- 實現篇：一文搞懂Promise是如何實現的
- 一文搞懂 Markdown 文檔規則
在數字化時代，網頁水印已成為版權保護、信息溯源的核心技術。今天就從明暗水印原理、前后端實現方案、防篡改機制等維度展開解析，結合主流技術實現代碼，探討水印技術的攻防博弈與最佳實踐。
1 明水印技術實現
1.1 DOM覆蓋方案
通過創建絕對定位的DOM元素覆蓋目標區域，利用CSS層級(z-index)和透明度(opacity)控制視覺呈現。此方案支持動態文本注入和樣式定制，但存在性能消耗和易篡改的缺陷。
示例代碼
<!doctype html>
<html><head><title>水印測試</title><style>body{height: 100%;}</style></head><body><script>function createDOMWatermark(opt) {const watermark = document.createElement('div');watermark.style.position = 'fixed';watermark.style.top = '0';watermark.style.left = '0';watermark.style.width = '100%';watermark.style.height = '100%';watermark.style.zIndex = '9999999';watermark.style.userSelect = 'none';watermark.style.pointerEvents = 'none';watermark.style.background = `repeating-linear-gradient(-${opt.rotate || 45}deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 20px, transparent 20px, transparent 40px)`;watermark.innerHTML = `<div style="transform: rotate(-30deg) translate(-50%, -50%);color: ${opt.color || '#333'};font-size: ${opt.fontSize || '24px'};position: absolute;opacity: 
