前端水印生成方案
举个🌰：
视觉中国网站的图片有明显的水印：
知乎图片：
以上是图片上加水印：
背景水印🌰：
钉钉软件背景水印
思路：
生成网页水印：
利用canvas生成图片，动态生成div填充整个背景，将生成的图片用于
background-image属性上，进行页面填充，然后通过Mutation Observer监视节点div的变动防止水印被删除。通过svg实现，实现原理与canvas相同, 相比Canvas，SVG有更好的浏览器兼容性，使用SVG生成水印的方式与Canvas的方式类似，只是base64Url的生成方式换成了SVG。
通过NodeJS生成水印。
生成图片水印：
- 通过canvas给图片加水印：读取图片，在图片加载完之后用canvas填充图片，并填充加密文字，然后将图片转成base64url传值给回调函数。
这样似乎能满足我们的需求了，但是还有一个问题，稍微懂一点浏览器的使用或者网页知识的用户，可以用浏览器的开发者工具来动态更改DOM的属性或者结构就可以去掉了。这个时候有两个解决办法：
1.监测水印div的变化，记录刚生成的div的innerHTML，每隔几秒就取一次新的值，一旦发生变化，则重新生成水印。但是这种方式可能影响性能；
2.使用MutationObserver
Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。
使用MutationObserver构造函数，新建一个观察器实例，实例的有一个回调函数，该回调函数接受两个参数，第一个是变动数组，第二个是观察器实例。MutationObserver 的实例的observe方法用来启动监听，它接受两个参数。
第一个参数：所要观察的 DOM 节点，第二个参数：一个配置对象，指定所要观察的特定变动，有以下几种：
MutationObserver只能监测到诸如属性改变、增删子结点等，对于自己本身被删除，是没有办法的可以通过监测父结点来达到要求。
demo地址：https://www.mwcxs.top/static/testTool/index.html
基本的最低位隐藏文本信息：
我们知道图片的像素信息里存储着 RGB 的色值，R、G、B 分别为该像素的红、绿、蓝通道，每个通道的分量值范围在 0~255，16 进制则是 00~FF。在 CSS 中经常使用其 16 进制形式，比如指定博客头部背景色为 #A9D5F4。其中 R（红色）的 16 进制值为 A9，换算成十进制为 169。这时候，对 R 分量的值+1，即为 170，整个像素 RGB 值为 #AAD5F4，别说你看不出差别，就连火眼金金的“ 像素眼” 设计师都察觉不出来呢。于此同时，修改 G、B 的分量值，也是我们无法察觉的。因此可以得出重要结论：RGB 分量值的小量变动，是肉眼无法分辨的，不影响对图片的识别。
打印出数据，会看到有一个非常大的数组。
这个一维数组存储了所有的像素信息，一共有 256 * 256 * 4 = 262144 个值。其中 4 个值一组，为什么呢？在浏览器中解析图片，除了 RGB 值外，每组第 4 个值为透明度值，即像素信息实际为大家熟知的 rgba 值。
这里的解密规则是对 R 通道进行处理，R 的分量最低位为 1 则该像素设为红色，R 的分量最低位为 0 则该像素设为黑色，直接看代码实现，完成后我们再绘制到 canvas，即可看到结果。
在图片中隐藏信息
讲了基础的解密过程，再来反向说说加密过程。
既然要在图片中加入文字信息，那么首先要获取文字的像素信息，这里我先用 canvas 在画布上打印文字，获取像素信息。
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n49" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">var textData;
// 这些canvas API，好久没用，需要查API文档了T_T
ctx.font = '30px Microsoft Yahei';
ctx.fillText('广告位招租u', 60, 130);
textData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data;</pre>
先保存文字的像素信息，接着加载图片获取其像素信息，然后对两组像素进行处理，我在这里抽离了一个公共方法。
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n51" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">var mergeData = function(newData, color){
var oData = originalData.data;
var bit, offset; // offset的作用是找到alpha通道值，这里需要大家自己动动脑筋
switch(color){
case 'R':
bit = 0;
offset = 3;
break;
case 'G':
bit = 1;
offset = 2;
break;
case 'B':
bit = 2;
offset = 1;
break;
}
for(var i = 0; i < oData.length; i++){
if(i % 4 == bit){
// 只处理目标通道
if(newData[i + offset] === 0 && (oData[i] % 2 === 1)){
// 没有信息的像素，该通道最低位置0，但不要越界
if(oData[i] === 255){
oData[i]--;
} else {
oData[i]++;
}
} else if (newData[i + offset] !== 0 && (oData[i] % 2 === 0)){
// // 有信息的像素，该通道最低位置1，可以想想上面的斑点效果是怎么实现的
if(oData[i] === 255){
oData[i]--;
} else {
oData[i]++;
}
}
}
}
ctx.putImageData(originalData, 0, 0);
}</pre>
上述代码做的是，接受要隐藏的数据以及隐藏的颜色通道，然后对原图进行操作，修改图片该通道分量的最低位，如果有文字信息，则最低位置为 1，否则为 0。从最文章开头的结论知道，RGB 的三个通道可以分别隐藏不同信息。
在 img.onload 中调用 mergeData(textData, 'R')，处理好图像后，只要在浏览器中的 canvas 上右键保存图片即可。
这里的例子比较简单，只展示了基本的最低位隐藏文本信息，像二维码这些简单图形也可以这么处理。现实中隐藏画中画则需要更专业的图像处理算法，这里就不再展开了。
二、复杂 频域制定数字盲水印
信号是有频率的，一个信号可以看做是无数个不同阶的正弦信号的的叠加。
数字水印：
主要作用就是标记版权和检测版权（辨认真伪）
[图片上传失败...(image-fa4c1f-1643205526696)]
https://blog.csdn.net/aria_miazzy/article/details/99649737
频域制定数字盲水印
频域方式图片合并水印是一个从图片的编码方式进行合成水印，水印不可见，直接反向编码才可以拿到水印，从最根本上解决了数据安全和数据泄露后的追踪问题。
信号是有频率的，一个信号可以看做是无数个不同阶的正弦信号的的叠加。
[图片上传失败...(image-528079-1643205526696)]
1、编码的目的有二，一是对水印加密，二控制水印能量的分布。以下是叠加数字盲水印的实验。
（1）原图像。尺寸300*240 ，汉子一枚，
（2）水印照片。
（3）水印编码。编码方式采用随机序列编码，通过编码，水印分布到随机分布到各个频率，并且对水印进行了加密。
（4）原图像频域。经历的是傅里叶变换，下图变换后的频域图像
（5）水印图像频域。经历的是傅里叶变换，下图变换后的频域图像
（6）合并水印和原图。之后，将叠加水印的频谱进行傅里叶逆变换，得到叠加数字水印后的图像，，将图像频域和水印编码进行合并。看不出来已经加了水印吧，哈哈哈
实际上，我们是把水印以噪声的形式添加到原图像中。
（7）水印图与原图的残差（看不出来残差区别，需要调整对比度才能看得出来）
（8）最终的均方差（MSE）和信噪比（PSNR）
（9）下图是原图频谱竖过来的样子，其能量主要集中在低频。
那么，为什么频谱发生了巨大的变化，而在空域却变化如此小呢？这是因为我们避开了图像的主要频率。
（10）水印提取是水印叠加的逆过程，
(11)提取后，得到水印。
复杂水印例子2：
