信息泄露就像是悬前端实现水印功Neng依然有着不可替代的地位。今天我们就来好好聊聊，在前端这片江湖里到底该如何布下这道防线。

前端与后端：两套不同的防御逻辑

在动手写代码之前，我们得先理清思路。水印的添加根据环境Ke以分为两大类：前端浏览器环境添加和后端服务环境添加。这就像是守门员和后卫的区别。后端加水印，是在图片生成或者数据下载的那一刻，就Yi经把标记“烧”进去了这种Zuo法Zui安全，用户拿到的就是一张处理过的图，想去掉dou难。但前端加水印呢？geng像是在展示层加了一层保护膜，它不改变原始数据，只是在视觉上Zuo文章。虽然懂点技术的人Neng绕过但对于防止随手截图、快速标记来源来说前端方案依然有着极高的性价比，毕竟它响应快、不占服务器资源。

方案一：Canvas 绘制——Zui经典的“背景图”战术

提到前端绘图，Canvas绝对是绕不开的大神。实现水印Zui主流的思路，就是利用Canvas画出一个水印单元，然后把它转换成一张Base64格式的图片，Zui后将这张图片设置为某个容器的背景图，通过background-repeat: repeat让它铺满整个屏幕。

这种方法的精髓在于“旋转”和“透明度”。谁也不希望一个大大的水印横在屏幕中间挡住视线，所以我们通常会设置一个倾斜角度，比如-20度，再调整一下透明度，让它若隐若现。

const createWaterMark =  => {
  const angle = -20;
  const txt = content;
  const canvas = document.createElement;
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext;
  // 清空画布，确保干净
  ctx.clearRect;
  // 设置样式
  ctx.fillStyle = '#cccccc';
  ctx.globalAlpha = 0.5; // 半透明效果
  ctx.font = `16px serif`;
  // 旋转坐标系
  ctx.rotate * angle);
  ctx.fillText;
  // 导出为Base64
  return canvas.toDataURL;
}
// 创建一个全屏遮罩层
const watermakr = document.createElement;
watermakr.className = 'watermark-layer';
watermakr.style.backgroundImage = `url})`;
document.body.appendChild;

配合一段简单的CSS，这个水印就Neng稳稳地躺在页面Zui上层了。记得加上pointer-events: none，否则你会发现页面上的按钮怎么点dou没反应——因为水印层把鼠标事件给截胡了！

.watermark-layer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none; /* 关键：让点击穿透 */
  z-index: 9999;
  background-repeat: repeat;
}

方案二：DOM 节点覆盖——简单粗暴的“网格”法

Ru果你觉得Canvas太麻烦，或者不想处理图片兼容性问题，那用DOM元素直接堆叠也是一种思路。虽然听起来有点“笨”，但效果可是实打实的。

这个逻辑hen简单：计算屏幕Neng放下多少个水印，然后用flex布局或者绝对定位，把一个个包含文字的div铺满整个页面。这就像是给窗户贴满磨砂贴纸。

divWaterMark  {
  const waterWrapper = document.createElement;
  // 先给这个大容器定个性
  cssHelper(waterWrapper, {
    position: 'fixed',
    top: '0px',
    right: '0px',
    bottom: '0px',
    left: '0px',
    overflow: 'hidden',
    display: 'flex',
    'flex-wrap': 'wrap',
    'pointer-events': 'none',
    'z-index': 9999
  });
  const waterHeight = width;
  const waterWidth = height;
  const { clientWidth, clientHeight } = document.documentElement || document.body;
  // 计算需要多少行多少列
  const column = Math.ceil;
  const rows = Math.ceil;
  for  {
    const wrap = document.createElement;
    cssHelper(wrap, {
      position: 'relative',
      width: `${waterWidth}px`,
      height: `${waterHeight}px`,
      overflow: 'hidden',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    });
    wrap.appendChild); // 假设createItem是用来生成文字的
    waterWrapper.appendChild;
  }
  document.body.appendChild;
}

这种方法的缺点也hen明显：Ru果页面内容特别多，DOM节点数量会爆炸，可Neng会影响页面的渲染性Neng。所以除非是特殊需求，一般还是推荐Canvas方案。

方案三：SVG 矢量绘图——高清时代的“宠儿”

Canvas虽然好用，但在高清屏上偶尔会遇到模糊的问题，而且它是位图，放大了就失真。这时候，SVG就站出来了。SVG和Canvas类似，也是生成背景图，只不过它是通过矢量数据生成的。

你Ke以把SVG代码直接拼成一个字符串，然后转成Blob或者Base64。它的好处是无论怎么放大，文字边缘永远是清晰的。对于那些对视觉要求极高的项目，SVG绝对是首选。

进阶防御：MutationObserver——与黑客的“猫鼠游戏”

上面说的几种方法，其实dou有一个致命的弱点：只要用户打开浏览器控制台，动动手指把那个水印节点删了或者改一下display: none，水印瞬间就消失了。这就像是你贴了封条，别人直接把封条撕了你却浑然不知。

为了解决这个问题，我们必须引入一位强力外援——MutationObserver。这是一个Ke以监听DOM结构变化的接口，Neng够监听DOM树属性、节点本身、子节点等的变化。防御思路就是使用MutationObserver去死死盯着那个水印节点，只要监听到任何风吹草动，立马重新渲染水印。

这就像是给水印配了个保镖，一旦有人想动它，保镖就会立刻把它扶起来。

createObserver  {
  // 创建一个观察器实例并传入回调函数
  const observer = new MutationObserver;
  observer.disconnect; // 先断开，防止重复连接
  // 配置观察选项
  const config = { attributes: true, childList: true, subtree: true };
  // 以上述配置开始观察目标节点
  observer.observe;
},
// 当观察到变动时执行的回调函数
callback  {
  const watermark = this.watermakr;
  const style = this.style;
  const currStyle = watermark.getAttribute;
  for  {
    // 检测元素样式被修改
    if (
      mutation.type === 'attributes' &&
      mutation.target === watermark &&
      currStyle !== style
    ) {
      // 发现样式不对？立刻改回来！
      watermark.setAttribute;
    }
    // 检测元素被删除
    mutation.removedNodes.forEach(item => {
      console.log;
      if  {
        // 居然被删了？立刻重生！
        this.canvasWaterMark;
        this.createObserver; // 记得重新绑定观察者
      }
    });
  }
}

有了这段代码，想要通过控制台删除水印就变得非常困难了。当然道高一尺魔高一丈，懂行的人依然Ke以通过禁用JavaScript或者停止脚本断点来绕过但这Yi经挡住了99%的普通用户。

图片加水印：像素级的“硬核”操作

除了给整个网页加蒙层，我们还经常遇到给图片加水印的需求。比如用户上传头像，或者下载报表时希望图片本身带有标记。

在图片上加水印的实现思路是：图片加载成功后画到canvas中，随后在canvas中绘制水印，完成后通过canvas.toDataURL方法获得base64并替换原来的图片路径。简单说就是对图片像素的处理，加密的信息散布在每个像素点上。

addWaterMarkToImg  {
  const img = new Image;
  img.src = imgUrl;
  // 注意：Ru果图片跨域，需要配置crossOrigin，否则toDataURL会报错
  img.crossOrigin = 'anonymous'; 
  img.onload = function  {
    const canvas = document.createElement;
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext;
    // 1. 先把原图画上去
    ctx.drawImage;
    // 2. 设置水印样式
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.font = '20px Microsoft Yahei';
    ctx.fillStyle = 'rgba';
    // 3. 计算位置并绘制文字
    const textX = 50;
    const textY = 50;
    ctx.fillText;
    // 4. 导出新的图片地址
    const base64Url = canvas.toDataURL;
    cb && cb;
  }
}
// 使用示例
const url = 'https://example.com/image.jpg';
this.addWaterMarkToImg => {
  document.querySelector.src = base64Url;
}, '禁止外传');

暗水印：kan不见的“隐形守护者”

上面说的dou是明水印，肉眼可见。但有时候，我们不想破坏画面的美感，又想保留溯源的Neng力，这时候就需要“暗水印”出场了。

暗水印是一种肉眼不可见的水印方式，Ke以保持图片美观的同时保护资源版权。原理听起来hen高大上，其实核心就是对像素数据的微调。常见的为通过修改RGB分量值的小量变动DWT、DCT 和 FFT 等等方法。每个像素点dou是由 RGB 三种元素构成。当我们把其中的一个分量修改，人的肉眼是hen难kan出其中的变化。

比如把某个像素的红色通道值从100改成101，人眼kan不出来但程序一读就Neng发现差异。通过特定的算法，我们Ke以把用户ID、时间戳等信息编码进这些微小的差异里。一旦图片泄露，我们只要拿原图一比对，就Neng把隐藏的信息提取出来。

前端实现水印功Neng，本质上是一场安全与体验的博弈。

Canvas方案综合实力Zui强，适合大多数网页防截图场景。

DOM方案简单粗暴，但性Neng较差，慎用。

SVG方案清晰度高，适合对视觉要求苛刻的场景。

MutationObserver必杀技，Neng极大提高水印被破坏的难度。

图片水印用于保护图片资源本身。

暗水印用于隐蔽溯源，是版权保护的Zui后一道防线。

在实际的项目开发中，我们往往会组合使用这些技术。比如用CanvasZuo明水印，再用MutationObserver守护，甚至在关键图片里混入暗水印。毕竟为了保护知识产权，多几道防线总是没错的。希望这篇文章Neng让你在下次面对水印需求时Neng从容不迫地拿出一份完美的方案！

---