共计 869 个字符，预计需要花费 3 分钟才能阅读完成。
前言
为减少零碎安全性，防止重要敏感信息通过截图形式泄露，对 web 页面减少盲水印标识，标注零碎名称，登陆人，以后工夫等信息，这里的盲水印指肉眼不可见的 html 水印
减少水印
引入 watermark.js 调用 watermark.load 办法，指定显示文字与透明度，我这边设置的不可见透明度为 0.015
| watermark.load( | |
| { | |
| watermark_txt: "后盾管理系统 -2022-11-26| 系统管理员 |sajsdljiqwdqjdwiqjwodj", | |
| watermark_alpha: 0.5 | |
| }) |
可见水印示例如下
不可见水印示例如下
检测水印
针对带有水印的截图图片，提供对应的检测显示水印的性能，将 img 标签和 div 重合搁置，为 div 设置 css 属性
mix-blend-mode: color-burn，相当于对图片加上一个滤镜，调亮底部对比度让水印显示进去
| <html> | |
| <style> | |
| .avatar { | |
| width: 1366px; | |
| height: 600px; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| .imgshadow { | |
| width: 1366px; | |
| height: 600px; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| background: #000; | |
| mix-blend-mode: color-burn; | |
| } | |
| </style> | |
| <body> | |
| <img id="image" class="avatar"> | |
| <div class="imgshadow" width="800" height="600"></div> | |
| <input type="file" onchange="selectImage(this);" style="margin-top: 650px" /> | |
| <script> | |
| function selectImage(file) {document.getElementById('image').src = URL.createObjectURL(file.files[0]); | |
| } | |
| </script> | |
| </body> | |
| </html> |
检测后的水印示例如下
正文完
