前言
为减少零碎安全性，防止重要敏感信息通过截图形式泄露，对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>检测后的水印示例如下