万奢网-名品奢网名表回收网 › 首页 ›手表回收云资讯› 手表导购 › 查看内容

JavaScript奇技淫巧：防删水印

2023-4-12 19:27| 发布者: wanhu| 查看: 104| 评论: 1

摘要: JavaScript奇技淫巧：防删水印JShaman原创资料，作者：w3sft，如转载请保留此信息。为了保护版权、防截图、防拍照等，有些我们会给网页中的视频、图片或文字加水印。实现的方式，可能有多种，比如：对图片、视频而言 ...

JavaScript奇技淫巧：防删水印

JShaman原创资料，作者：w3sft，如转载请保留此信息。

为了保护版权、防截图、防拍照等，有些我们会给网页中的视频、图片或文字加水印。

实现的方式，可能有多种，比如：对图片、视频而言，可以在服务端完成水印，但对于文字信息类，一般只能在前端页面中进行水印添加。

本文分享一种图层式防删水印技术。其效果是：在页面渲染完成后，由JavaScript进行图层水印添加，并会实时检测水印状态，如果水印被删除、隐藏、或设置为透明，都会重置水印。

源码

<html>
<body>
<div id="content" style="padding:10px;">
<h2>防删文字水印</h2>
水印内容不可删除，如检测到被删除，会重新添加水印
</div>
<script>
function add_water_canvas(){
//水印canvas
var water_canvas = document.createElement("canvas");
water_canvas.id = "water_canvas";
water_canvas.height = 100;
water_canvas.width = 300;
water_canvas.style.top = 100 + "px";
water_canvas.style.left = 100 + "px";
water_canvas.style.position = "absolute";
water_canvas.style.transform = "rotate(-45deg)";
//水印内容
var water_text = water_canvas.getContext("2d");
water_text.font = "26px 黑体";
water_text.fillText("水印内容", 30, 50);
//canvas容器：水印目标
var canvas_container = document.getElementById("content");
canvas_container.style.height = 280 + "px";
canvas_container.style.width = 500 + "px";
canvas_container.style.backgroundImage = "url(bg.png)";
//添加水印canvas给目标div
canvas_container.appendChild(water_canvas);
}
add_water_canvas();
var observer = new MutationObserver(function(mutations){
mutations.forEach(function(mutation){
if(mutation.removedNodes.length > 0 && mutation.removedNodes[0].id == "water_canvas") {
console.log("检测到水印被删除，已重新添加水印");
//重新添加水印
add_water_canvas();
}
if (mutation.type == "attributes" && mutation.target.id == "water_canvas") {
console.log("检测到水印属性被修改，已重置属性");
water_canvas.style.display = "block";
water_canvas.style.opacity = 1;
}
});
});
observer.observe(document.body, {
childList: true,
attributes: true,
subtree: true,
attributesOldValue: true,
characterData: true,
characterDataOldValue: true,
});
</script>
</body>
</html>