web系統(tǒng)添加盲水印
前言
為增加系統(tǒng)安全性，避免重要敏感信息通過截圖方式泄露，對web頁面增加盲水印標識，標注系統(tǒng)名稱，登陸人，當前時間等信息，這里的盲水印指肉眼不可見的html水印
增加水印
引入watermark.js調(diào)用 watermark.load方法，指定顯示文字與透明度，我這邊設置的不可見透明度為0.015
watermark.load(
{
? watermark_txt: "后臺管理系統(tǒng)-2022-11-26|系統(tǒng)管理員|sajsdljiqwdqjdwiqjwodj",
? watermark_alpha: 0.5
})
可見水印示例如下
不可見水印示例如下
檢測水印
針對帶有水印的截圖圖片，提供對應的檢測顯示水印的功能，將img標簽和div重合放置，為div設置css屬性
mix-blend-mode: color-burn，相當于對圖片加上一個濾鏡，調(diào)亮底部對比度讓水印顯示出來
<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>
檢測后的水印示例如下
鏈接：https://www.dianjilingqu.com/623086.html
