Web 水印技术在信息安全和版权保护等领域有着广泛的应用，对防止信息泄露或知识产品被侵犯有重要意义。水印根据可见性可分为可见水印和不可见水印（盲水印），本文将分别予以介绍，带你探秘 web 水印技术。

可见水印

最简单的水印

一种比较常见的简单水印场景是给文章、表格加上 logo 水印，用以申明版权。

 

 这里想要的效果就是一个浅浅的 logo 平铺展示。实现起来也比较简单，只需制作一个半透明的 logo 图片，设为文章或者表格的背景图片即可。仅需一行 CSS 声明。

background-image:url("./logo.png");

实现图片平铺关键的 CSS 属性是 background-repeat，值为 repeat 时是平铺，这也是它的默认值，所以可以省略。

全页面水印

照葫芦画瓢，如果要给整个 Web 页面加上水印，是不是给页面的 body 元素设置背景图片平铺展示就可以了呢？

然而通常并不会这么处理，因为文章和表格内容多以文本为主，不会明显遮挡水印，而一个完整的页面往往还包含很多其他页面元素，比如图片、视频、控件等等，它们很可能会遮挡住背景图片，从而影响水印效果。

所以，为了避免被其他元素遮挡，针对页面的水印一般会使用一个层级比较高且覆盖整个页面的元素来承载。

div.watermark{
  position: fixed;
  left:0;
  top:0;
  width: 100vw;
  height: 100vh;
  background-image:url("./logo.png");
  opacity: .5;
  z-index: 3000;
}

这样一来，其他元素就遮挡不住水印了。不过，这个 div 反过来可能会遮挡页面其他元素，影响页面元素操作。还需要一条关键的 CSS 声明来破解这个问题 :

pointer-events: none;

这个 CSS 声明会使该元素“可穿透”，“看得见、摸不着”，不再影响页面操作。

动态水印

很多时候，给页面加水印的目的并不是申明版权，而是为了支持溯源。此时水印的内容并不会只是一个 logo，通常会包含用户信息，比如用户名、UID、手机号等等。

 

 

这就意味着，每个用户的水印内容是不同的，无法通过提前准备好一张图片来满足了。这种场景往往需要根据用户信息动态生成图片。

我们来看下几种主流的动态生成水印图片的方式：

服务端方案

传统的方式是在服务端生成图片。页面上发起的图片请求中可以附带用户信息，服务端根据这些参数动态生成图片，并将图片数据作为该请求的响应返给页面，页面拿到后将其用作水印。

这种方式的优点是兼容性好，缺点是需要前后端配合，增加了页面请求和服务端资源开销，防攻击能力也较差。

Canvas 方案

HTML5 引入 Canvas 特性使得浏览器自身具备了绘图能力。经过多年的发展，主流浏览器基本都已可以提供良好的支持。通过 Canvas 可以轻松绘制图片，并可将图片数据导出，用于页面图片或背景。

const canvasElement = document.createElement('canvas');
const context = canvasElement.getContext('2d');
canvasElement.width = 200;
canvasElement.height = 200;
context.rotate((-30 * Math.PI) / 180);
context.font = '400 26px Arial';
context.fillStyle = '#B9C0CA';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('水印文字', 70, 130);
const watermark = canvasElement.toDataURL('image/png');

通过上述示例代码可拿到水印图片的 data URI 数据，用作水印承载元素的背景图片平铺展示即可。

这种方式不需要服务端配合，在前端就可以完成，且有助于减少请求和服务端资源开销。曾经面临的浏览器兼容问题现在也不再是问题，该方案已逐渐流行起来。

SVG 方案

对于纯文字的水印来说，有没有办法不生成图片而直接实现平铺呢？

动态创建大量 DOM 节点，通过 CSS 控制排列当然可以实现，但是繁琐且性能差，优雅更无从谈起。

不妨换个角度思考，有没有办法让文字不转成图片就可以用作 background-image 属性的值呢？这样就可以利用 background-repeat 实现平铺效果了。

这时候可以考虑使用 SVG，因为 SVG 具有文本和图像的双重特性。看上去是文本，然而在很多场景可以当做图片使用。

我们可以通过 SVG 的相关属性精准控制字体位置、大小、颜色、透明度和旋转角度等参数。如：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="50%" y="50%" font-size="30" fill="#a2a9b6" fill-opacity="0.3" font-family="system-ui, sans-serif" text-anchor="middle" dominant-baseline="middle" transform='rotate(-45, 100 100)'>水印文字</text>
</svg>

考虑到浏览器兼容性，用作背景图片时，建议将 SVG 编码为 Base64（或转义特定字符）:

 

 

不可见水印（盲水印）

不可见水印也叫盲水印、隐水印，顾名思义是一种看不到的水印，看不到还要它做什么呢？其实，不可见水印在一些对安全性要求较高的场景意义还是蛮大的。不可见水印通常具有比可见水印更好的隐蔽性和抗攻击性。虽不可见，但通过一定的技术手段是可以将水印信息从其载体上提取出来的，这就使得其载体具备了溯源能力，在关键时刻往往能发挥大作用。

我总结不可见水印相对可见水印至少有以下三个明显的优势：

• 更好的观感。可见水印总给人一种“膏药感”，甚至会引起部分人的不适，而不可见水印则不会有这个问题。
• 更佳的隐蔽性。用户基本感知不到水印的存在。
• 更强的抗攻击性。可见水印更容易受到攻击，而不可见水印除了隐蔽性比较强之外，其自身往往还具备比较强的抗攻击能力。

不可见水印（盲水印）属于信息隐匿技术（也叫隐写术），历史悠久，手段繁多。在现代，随着计算机网络技术的发展，数字产品的信息安全和版权保护也已成为信息隐匿技术的一个重要课题。隐写术在数字音频、数字视频和数字图像领域有着非常广泛的应用。

Web 上基于 DOM 的盲水印大都不靠谱，而另一方面数字图像是信息隐藏和数字水印领域研究最多和最早的一种载体，相较于 Web，数字图像领域有着更为成熟的数字水印算法。我们不妨先来看下数字图像领域的常见盲水印技术。

在说数字水印之前，这里介绍一些数字图像的基础知识。

数字图像（位图）是由像素（pixel）组成。

• 非黑即白的二值图像，1 个 bit 即可表示 1 个像素（黑白两种状态）。所以 1 个字节（byte）可以表示 8 个像素。
• 灰度图，1 个像素有 256 种状态（2 的 8 次方），需要 8 个 bit，即 1 个字节。
• 彩色的 RGB 图，有 R / G / B 三个通道，每个通道 256 种状态，使用 1 个字节表示，共需 3 个字节表示 1 个像素。
• RGBA 图，在 R / G / B 三个通道基础上增加了一个透明度通道，256 种状态，额外需要 1 个字节，共需要 4 个字节表示一个像素。

通常，考虑到计算速度和性能，图像处理和图像识别大都会将图像转成灰度图或者选择其中一个通道进行。

LSB 水印

如上文所述，灰度图像的一个像素有 256 种状态，通常用灰度值（ 0-255 ）表示，0 表示黑色，255 表示白色，灰度值越大表示亮度越高。

灰度可用一个字节，即 8 比特二进制数表示，其中最高位对图像的贡献最大，最低位对图像的贡献最小，称为最低比特位（Least Significant Bit，LSB）。

如果将一个图像所有像素的比特位抽出来，就构成了 8 个不同的位平面，从 LSB（最低有效位 0）到 MSB（最高有效位 7）。位平面从低位到高位，图像的特征逐渐变得复杂，细节不断增加，相邻比特的相关性也越强。而比特位越低包含的图像信息就越少，最低位平面类似于随机噪声。因此，改变低位对图像的成像质量影响不大。

LSB 水印就是利用了这一点，用水印信息替换载体图像的最低比特位，这样原图像的 7 个高位平面就与表示水印信息的最低位平面组成了新的图像。