一.明水印和暗水印
前端水印可以分为明水印和暗水印两种类型:
1.明水印:明水印是通过在文本或图像上覆盖另一层图像或文字来实现的。这种水印会明显地出现在页面上,可以用来显示版权信息或其他相关信息。
2.暗水印:暗水印是指在文本或图像中隐藏相关信息的一种技术。这种水印不会直接出现在页面上,只有在特殊的程序或工具下才能被检测到。暗水印通常用于保护敏感信息以及追踪网页内容的来源和版本。
二.添加水印的方法
- 重复的dom元素覆盖实现: 在页面上覆盖⼀个position:fixed的div盒子,盒子透明度设置较低,设置pointer-events: none;样式实现点击穿透,在这个盒子内通过js循环生成小的水印div,每个水印div内展示⼀个要显示的水印内容。
- canvas输出背景图: 绘制出⼀个水印区域,将这个水印通过toDataURL方法输出为⼀个图片,将这个图片设置为盒子的背景图,通过backgroud-repeat:repeat;样式实现填满整个屏幕的效果。
- svg实现背景图: 与canvas生成背景图片的法类似,只不过是生成背景图的方法换成了通过svg生成。
- 图片加水印。
三. 通过css 添加的水印如何防止用户删除对应的 css , 从而达到去除水印的目的
使用 CSS 添加水印的方式本身并不能完全防止用户删除对应的 CSS 样式,从而删除水印。但是,可以采取⼀些措施来增加删除难度,提高水印的防伪能力。
- 调用外部CSS文件:将水印样式单独设置在一个CSS文件内,并通过外链的方式在网站中调用,可以避免用户通过编辑页面HTML文件或内嵌样式表的方式删除水印。
- 设置样式为 !important:在CSS样式中使用 !important 标记可以避免被覆盖。但是,这种方式会影响网页的可读性,需慎重考虑。
- 添加自定义类名:通过在CSS样式中加入自定义的class类名,可以防止直接删掉该类名,来删除水印。但是,用户也可以通过重新定义该类名样式来替换水印。
- 将水印样式应用到多个元素上:将水印样式应用到多个元素上,可以使得用户删除水印较为困难。
- 使用JavaScript动态生成CSS样式:可以监听挂载水印样式的dom 节点, 如果用户改变了该 dom, 重新生成对应的水印挂载上去即可。 这样可以通过JS动态生成CSS样式,避免用户直接在源文件中删除CSS代码。但需要注意的是,这种方案会加重网页的加载速度。
- 混淆CSS代码:通过多次重复使用同⼀样式,或者采用CSS压缩等混淆手段,可以使CSS样式表变得复杂难懂,增加水印被删除的难度。
- 采用图片水印的方式:将水印转化为一个透明的PNG图片,然后将其作为网页的背景图片,可以更有效地防止水印被删除。
- 使用SVG图形:可以将水印作为SVG图形嵌入到网页中进行展示。由于SVG的矢量性质,这种方式可以保证水印在缩放或旋转后的清晰度,同时也增加了删除难度。
四.暗水印如何把水印信息隐藏起来
暗水印的基本原理是在原始数据(如文本、图像等)中嵌入信息,从而实现版权保护和溯源追踪等功能。暗水印把信息隐藏在源数据中,使得人眼难以察觉,同时对源数据的影响尽可能小,保持其自身的特征。
- 水印信息处理:将待嵌⼊的信息经过处理和加密后,转化为二进制数据。
- 源数据处理:遍历源数据中的像素或二进制数据,根据特定规则对其调整,以此腾出空间插入水印二进制数据。
- 嵌入水印:将水印二进制数据插入到源数据中的指定位置,以某种方式嵌入到源数据之中。
- 提取水印:在使用暗水印的过程中,需要从带水印的数据中提取出隐藏的水印信息。提取水印需要使用特定的解密算法和提取密钥。
暗水印的关键在嵌入水印的过程中,要保证水印对源数据的伤害尽可能的小,同时嵌入水印后数据的分布、统计性质等不应发生明显变化,以更好地保持数据的质量和可视效果。