谈谈前端实现水印

前端网站水印

在实际开发中，我们页面的一些内容出于各种原因可能需要打上水印。而且只希望能在水印状态下观看

传统水印

在页面内增加一个元素,然后让这个元素带水印照片，然后充满整个内容页，这样在视觉效果上基本实现了水印的功能
例如：
也有一些插件也能够更便捷的给页面添加水印。
但是这些水印都有一个问题。比如懂行的打开元素检查器把水印元素去除掉，或者设置一些不可见的style属性。这样我们就失去了水印的效果，可能这不是我们想要的

MutationObserver 实现不可去水印

MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。

这个是dom3提供的一个接口，我们可以用来监测我们的dom的变化。

例如

let globalObserver = new MutationObserver(function (mutations) {//全局监测dom

                //Do something
            });
            globalObserver.observe(document.querySelector('body'), {
                childList: true
            });

这样我们就是在监测body元素下，所有子节点的变化。

我们在页面内删掉一个元素试一试：

在removedNodes里面就会有我们刚刚操作删除的元素，还可以监测到其他的dom内容更改什么的，所以如果我们在页面中建立一个水印元素，然后对他进行监测，如果发生对水印元素正常显示产生威胁的操作时（比如把水印元素设置成display：none，或者直接在检查器里面删除），我们就可以进行页面重载，或者重新渲染准备好的水印元素。

这样我们就实现了内容真实的带上水印，而且不能被别人隐藏。

这里提供一个简单的水印实例

function createWater(init) {//样式元素可以自行配置
            if (document.getElementById('watermark')) {
                document.body.removeChild(document.getElementById('watermark'))
            }
            let canvas = document.createElement('canvas');
            let globalObserver = null;
            let observer = null;
            document.body.appendChild(canvas);
            canvas.id = 'watermark';
            canvas.width = canvas.height = 1000;
            canvas.style.pointerEvents = 'none';
            canvas.style.zIndex = 999;
            canvas.style.position = 'fixed';
            canvas.style.top = '0px';
            canvas.style.left = "0px"
            let watermark = document.querySelector('#watermark');
            ctx = watermark.getContext("2d");
            ctx.fillStyle = "transparent";
            ctx.fillRect(0, 0, 1800, 1600);
            //1. 使用`font`设置字体。
            ctx.font = "50px serif";
            //2. 使用`fillStyle`设置字体颜色。
            ctx.fillStyle = "#00AAAA";
            //3. 使用`fillText()`方法显示字体。
            ctx.fillText("我的水印你删不掉", 50, 120);
            globalObserver = new MutationObserver(function (mutations) {//全局监测水印状态
                let MutationRecord = mutations[0];
                console.log(mutations)
                if (MutationRecord.type === 'childList' && MutationRecord.removedNodes.length > 0) {
                    let nodes = MutationRecord.removedNodes;
                    Array.prototype.map.call(nodes, (val, index) => {
                        if (val.tagName === "CANVAS" && val.id === 'watermark') {
                            globalObserver.disconnect();
                            observer.disconnect();
                            createWater();
                        }
                    });
                }
            });
            globalObserver.observe(document.querySelector('body'), {
                childList: true
            });
            observer = new MutationObserver(function (mutations) {//监测水印自身状态
                observer.disconnect();
                globalObserver.disconnect();
                createWater();
            });
            observer.observe(document.querySelector('#watermark'), {
                attributes: true,
                childList: true,
                subtree: true
            });
        };

感兴趣的可以试一试。

大佬勿喷

参考资料：

1: https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver