前言
為增加系統安全性，避免重要敏感資訊通過截圖方式泄露，對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" >
<div height="600"></div>
<input type="file" onchange="selectImage(this);" style="margin-top: 650px" />
<script>
function selectImage(file) {
document.getElementById('image').src = https://www.cnblogs.com/yanpeng19940119/p/URL.createObjectURL(file.files[0]);
}
</script>