​探秘 Web 水印技术

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

可见水印

最简单的水印

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

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

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

实现图片平铺关键的 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;
}` 
1
2
3
4
5
6
7
8
9
10

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

`pointer-events: none;` 
1

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

动态水印

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

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

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

服务端方案

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

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

Canvas 方案

HTML5 引入 Canvas 特性使得浏览器自身具备了绘图能力。经过多年的发展&