当前位置：首页 > 文章列表 > 文章 > 前端 > 前端添加水印的JS实现方法

前端添加水印的JS实现方法

2025-12-07 18:32:35 0浏览收藏

推广推荐

免费电影APP ➜

支持 PC / 移动端，安全直达

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《前端水印JS实现方法详解》，聊聊，我们一起来看看吧！

答案：前端水印通过Canvas或DOM生成，用于防信息泄露，可结合用户信息动态渲染并监听删除操作，但仅作辅助防护。

前端水印技术的JS实现方案_javascript技巧

前端水印技术常用于防止信息泄露或追溯数据来源，尤其在后台管理系统、数据可视化平台中应用广泛。通过 JavaScript 动态生成水印，可以有效提醒用户当前页面内容受保护，同时具备一定的防截图取证能力。以下是几种常见的 JS 实现方案。

1. 使用 Canvas 生成背景水印

这是最常见且兼容性良好的实现方式。利用 Canvas 绘制文字或图像，将其转为 base64 背景图，再设置到页面元素上。

实现步骤：

创建一个 canvas 元素，并获取绘图上下文
设置字体、颜色、旋转角度等样式
循环绘制水印文字（如用户名、时间、权限等级）
将 canvas 转为 dataURL
设置 body 或指定容器的 background-image

function createWatermark(text = '默认水印') {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
<p>canvas.width = 200;
canvas.height = 100;
ctx.rotate(-20 * Math.PI / 180);
ctx.font = '16px Microsoft YaHei';
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.textAlign = 'left';
ctx.fillText(text, 20, 50);</p><p>const base64Url = canvas.toDataURL();
document.body.style.backgroundImage = <code>url(${base64Url})</code>;
document.body.style.backgroundRepeat = 'repeat';
}
// 调用
createWatermark('张三 - 内部机密');</p>

2. DOM 动态插入水印层

相比背景图，使用多个绝对定位的 DOM 元素可增强水印可见性，更难被轻易去除。

优点：可监听并恢复被删除的水印节点，适合对安全性要求较高的场景。

实现要点：

创建多个带水印文本的 div，覆盖整个页面
设置 pointer-events: none，避免影响用户操作
使用 MutationObserver 监听 DOM 变化，防止被移除

function addDomWatermark(text) {
  const watermark = document.createElement('div');
  watermark.className = 'watermark-container';
  watermark.style.cssText = `
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.1;
  `;
<p>// 生成网格状水印
for (let i = 0; i < 20; i++) {
for (let j = 0; j < 10; j++) {
const span = document.createElement('span');
span.innerText = text;
span.style.cssText = <code> position: absolute; left: ${i * 100}px; top: ${j * 100}px; transform: rotate(-30deg); font-size: 14px; color: #000; white-space: nowrap; </code>;
watermark.appendChild(span);
}
}
document.body.appendChild(watermark);</p><p>// 防止被删除
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
mutation.removedNodes.forEach(node => {
if (node === watermark) {
document.body.appendChild(watermark);
}
});
});
});</p><p>observer.observe(document.body, { childList: true, subtree: true });
}</p>

3. 水印内容动态化与安全增强

静态水印容易被绕过，建议结合用户信息动态生成，提升溯源能力。

推荐做法：

将用户 ID、IP（前端可通过接口获取）、时间戳嵌入水印
定期更新水印内容，防止伪造
结合后端签名，验证水印合法性
开发模式下隐藏水印，生产环境自动启用

例如：

fetch('/api/user/info').then(res => res.json()).then(data => {
  const text = `${data.name} ${data.id} ${new Date().toLocaleString()}`;
  createWatermark(text);
});