当前位置：首页 > article >正文

网页常见水印实现方式

article 2025/9/18 10:36:01

文章目录

- 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覆盖方案

sTK37U7G_WX20250513-172616@2x.png

通过创建绝对定位的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: