前端水印小解

一.明水印和暗水印

前端水印可以分为明水印和暗水印两种类型：

1.明水印：明水印是通过在文本或图像上覆盖另一层图像或文字来实现的。这种水印会明显地出现在页面上，可以用来显示版权信息或其他相关信息。

2.暗水印：暗水印是指在文本或图像中隐藏相关信息的一种技术。这种水印不会直接出现在页面上，只有在特殊的程序或工具下才能被检测到。暗水印通常用于保护敏感信息以及追踪网页内容的来源和版本。

二.添加水印的方法

1. 重复的dom元素覆盖实现： 在页面上覆盖⼀个position:fixed的div盒子，盒子透明度设置较低，设置pointer-events: none;样式实现点击穿透，在这个盒子内通过js循环生成小的水印div，每个水印div内展示⼀个要显示的水印内容。
2. canvas输出背景图： 绘制出⼀个水印区域，将这个水印通过toDataURL方法输出为⼀个图片，将这个图片设置为盒子的背景图，通过backgroud-repeat：repeat；样式实现填满整个屏幕的效果。
3. svg实现背景图： 与canvas生成背景图片的法类似，只不过是生成背景图的方法换成了通过svg生成。
4. 图片加水印。

三. 通过css 添加的水印如何防止用户删除对应的 css ， 从而达到去除水印的目的

使用 CSS 添加水印的方式本身并不能完全防止用户删除对应的 CSS 样式，从而删除水印。但是，可以采取⼀些措施来增加删除难度，提高水印的防伪能力。

1. 调用外部CSS文件：将水印样式单独设置在一个CSS文件内，并通过外链的方式在网站中调用，可以避免用户通过编辑页面HTML文件或内嵌样式表的方式删除水印。
2. 设置样式为 !important：在CSS样式中使用 !important 标记可以避免被覆盖。但是，这种方式会影响网页的可读性，需慎重考虑。
3. 添加自定义类名：通过在CSS样式中加入自定义的class类名，可以防止直接删掉该类名，来删除水印。但是，用户也可以通过重新定义该类名样式来替换水印。
4. 将水印样式应用到多个元素上：将水印样式应用到多个元素上，可以使得用户删除水印较为困难。
5. 使用JavaScript动态生成CSS样式：可以监听挂载水印样式的dom 节点， 如果用户改变了该 dom, 重新生成对应的水印挂载上去即可。 这样可以通过JS动态生成CSS样式，避免用户直接在源文件中删除CSS代码。但需要注意的是，这种方案会加重网页的加载速度。
6. 混淆CSS代码：通过多次重复使用同⼀样式，或者采用CSS压缩等混淆手段，可以使CSS样式表变得复杂难懂，增加水印被删除的难度。
7. 采用图片水印的方式：将水印转化为一个透明的PNG图片，然后将其作为网页的背景图片，可以更有效地防止水印被删除。
8. 使用SVG图形：可以将水印作为SVG图形嵌入到网页中进行展示。由于SVG的矢量性质，这种方式可以保证水印在缩放或旋转后的清晰度，同时也增加了删除难度。

四.暗水印如何把水印信息隐藏起来

暗水印的基本原理是在原始数据（如文本、图像等）中嵌入信息，从而实现版权保护和溯源追踪等功能。暗水印把信息隐藏在源数据中，使得人眼难以察觉，同时对源数据的影响尽可能小，保持其自身的特征。

1. 水印信息处理：将待嵌⼊的信息经过处理和加密后，转化为二进制数据。
2. 源数据处理：遍历源数据中的像素或二进制数据，根据特定规则对其调整，以此腾出空间插入水印二进制数据。
3. 嵌入水印：将水印二进制数据插入到源数据中的指定位置，以某种方式嵌入到源数据之中。
4. 提取水印：在使用暗水印的过程中，需要从带水印的数据中提取出隐藏的水印信息。提取水印需要使用特定的解密算法和提取密钥。

暗水印的关键在嵌入水印的过程中，要保证水印对源数据的伤害尽可能的小，同时嵌入水印后数据的分布、统计性质等不应发生明显变化，以更好地保持数据的质量和可视效果。