JavaScript奇技淫巧：防删水印

w2sfot

已于 2023-04-08 09:31:42 修改

阅读量235

点赞数

文章标签： javascript 水印图片水印视频水印

于 2023-04-08 09:23:26 首次发布

本文链接：https://blog.csdn.net/w2sft/article/details/130024572

版权

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>

技术原理

添加水印的方式平平无奇，只是新建了一个canvas图层，在图层中叠加水印内容。

取巧的是用MutationObserver对水印进行监控和重置。MutationObserver是一个很有创意的接口，它可以监听页面元素变化，任何元素的修改，如节点的增减、属性值更新、文本内容的改动都会触发MutationObserve事件，在本例中，会监测两种事件：节点删除、节点属性发生变化。

如，删除水印节点：

删除时触发事件，时此会还原节点、重置水印：

如，结点属性被修改（修改display为none使元素不可见，或修改opacity为0使元素完全透明），都会触监听事件，并重置节点属性：

其实应用于产品或项目时，可将JS代码用JShaman进行混淆加密，以防止代码被分析识破从而被针对性的反制。

注：本文演示中是给div添加水印，实际应用此技术时，水印可添加给任意种类的元素内容。

w2sfot

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript奇技淫巧：防删水印

原创资料，作者：w3sft，如转载请保留此信息。为了保护版权、防截图、防拍照等，有些我们会给网页中的视频、图片或文字加水印。实现的方式，可能有多种，比如：对图片、视频而言，可以在服务端完成水印，但对于文字信息类，一般只能在前端页面中进行水印添加。本文分享一种图层式防删水印技术。其效果是：在页面渲染完成后，由JavaScript进行图层水印添加，并会实时检测水印状态，如果水印被删除、隐藏、或设置为透明，都会重置水印。
复制链接

扫一扫