通过前端方法实现水印加密

为了防止信息泄露或知识产权被侵犯，在web的世界里，对于页面和图片等增加水印处理是十分有必要的，水印的添加根据环境可以分为两大类，前端浏览器环境添加和后端服务环境添加，简单对比一下这两种方式的特点：

前端浏览器加水印：

• 减轻服务端的压力，快速反应
• 安全系数较低，对于掌握一定前端知识的人来说可以通过各种骚操作跳过水印获取到源文件
• 适用场景：资源不跟某一个单独的用户绑定，而是一份资源，多个用户查看，需要在每一个用户查看的时候添加用户特有的水印，多用于某些机密文档或者展示机密信息的页面，水印的目的在于文档外流的时候可以追究到责任人

后端服务器加水印：

• 当遇到大文件密集水印，或是复杂水印，占用服务器内存、运算量，请求时间过长
• 安全性高，无法获取到加水印前的源文件
• 适用场景：资源为某个用户独有，一份原始资源只需要做一次处理，将其存储之后就无需再次处理，水印的目的在于标示资源的归属人

因为减轻对后端服务器的压力，所以这次讲讲通过前端方法去实现一个水印加密。

实现方案

1. 重复的dom元素覆盖实现

从效果开始，要实现的效果是「在页面上充满透明度较低的重复的代表身份的信息」，第一时间想到的方案是在页面上覆盖一个position:fixed的div盒子，盒子透明度设置较低，设置pointer-events: none;样式实现点击穿透，在这个盒子内通过js循环生成小的水印div，每个水印div内展示一个要显示的水印内容，简单实现了一下

  <style> 
            #watermark-box { 
                position: fixed; 
                top: 0; 
                bottom: 0; 
                left: 0; 
                right: 0; 
                font-size: 24px; 
                font-weight: 700; 
                display: flex; 
                flex-wrap: wrap; 
                overflow: hidden; 
                user-select: none; 
                pointer-events: none; 
                opacity: 0.1; 
                z-index: 999;