答案：通过JavaScript动态生成水印层、Canvas绘制背景水印、禁用右键与复制等手段，结合前端技术实现网页内容保护。1. 使用JS创建透明div覆盖页面，显示用户信息水印；2. 利用Canvas生成斜向文字base64图作为背景，增强防删性；3. 通过CSS和事件监听阻止文本选择与复制；4. 前端水印具威慑作用，需配合后端日志与权限控制用于文档预览等场景，提升盗用成本。
在网页内容保护中，添加水印是一种常见手段，用于防止未经授权的截图或复制行为。通过 HTML 与 CSS、JavaScript 配合，可以实现动态、透明的视觉水印，提升内容安全性。以下是几种实用的在线网页水印添加技术实现方式。
1. 使用 JavaScript 动态生成水印层
通过 JavaScript 在页面加载时动态插入一个半透明的水印层，覆盖在内容上方，既不影响阅读，又能起到标识作用。
- 创建一个全屏或局部覆盖的 div 元素，设置指定位文字（如用户ID、时间戳）
- 使用 CSS 将其设置为固定定位、低透明度、倾斜排列
- 通过 JS 将水印注入 DOM，防止直接通过审查元素轻易删除
示例代码：
function addWatermark(text) {
const watermark = document.createElement('div');
watermark.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 20px,
rgba(0,0,0,0.03) 20px,
rgba(0,0,0,0.03) 40px
);
z-index: 99999;
font-size: 14px;
color: rgba(0,0,0,0.6);
transform: rotate(-30deg);
opacity: 0.1;
user-select: none;
pointer-events: none;
background-size: 200px 200px;
background-position: center center;
z-index: 9999;
`;
watermark.setAttribute('data-watermark', text);
document.body.appendChild(watermark);
}
// 调用
addWatermark('用户：test@example.com | 时间：2025-04-05');
2. 基于 Canvas 生成背景水印图
利用 Canvas 绘制文字并转换为 base64 图像，作为页面背景重复显示，更难被移除。
立即学习“前端免费学习笔记（深入）”；
- 在 Canvas 上绘制斜向排列的文字
- 导出为 data URL
- 设置为 body 或容器的 background-image
示例代码片段：
function createCanvasWatermark(text) {
const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
const ctx = canvas.getContext('2d');
ctx.rotate(-Math.PI / 6);
ctx.font = '14px Microsoft YaHei';
ctx.fillStyle = 'rgba(0,0,0,0.1)';
ctx.fillText(text, 20, 100);
return canvas.toDataURL('image/png');
}
document.body.style.backgroundImage = `url(${createCanvasWatermark('版权所有')})`;
3. 防止复制与右键的辅助保护
结合水印，可增加基本的内容防复制机制，提升整体防护效果。
- 禁用右键菜单：contextmenu 事件阻止
- 阻止文本选择：user-select: none CSS 属性
- 监听复制事件：copy 事件中添加提示或拦截
示例：
// 禁止右键
document.addEventListener('contextmenu', e => e.preventDefault());
// 禁止选择
document.body.style.userSelect = 'none';
// 拦截复制
document.addEventListener('copy', e => {
e.preventDefault();
alert('内容受保护，禁止复制！');
});
4. 注意事项与局限性
前端水印主要用于威慑和溯源，无法完全防止高级手段的窃取。
- 所有前端代码均可被调试或绕过，适合轻量级保护
- 建议结合后端日志记录用户行为，实现追踪
- 避免过度干扰用户体验，如频繁弹窗或完全封锁操作
- 对重要数据应采用权限控制、接口加密等综合手段
基本上就这些。水印技术虽不能百分百防盗，但能有效提升内容被滥用的成本，适合文档预览、内部系统、会员内容等场景。实现时不依赖第三方库，纯 HTML + CSS + JS 即可完成。
