前言
爲增加系統安全性，避免重要敏感信息通過截圖方式泄露，對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>
檢測後的水印示例如下
