使用MutationObserver监控dom树实现水印的不可删除属性。

摘要：有三个方法，分别是主要说方法，在实现水印不可删除的过程中主要需要应对的逻辑有两个，第一种是对水印节点的修改，第二种是对水印节点的删除。也就是说为的就是我需要监控的节点。

MutationObserver 是一个观察对象，提供用来当DOM树发生变化时开发者可以根据发生的变化，进行逻辑的变化。
就像三体中的水滴一样，当地球上出现大型强子对撞研究时，会触发一定的逻辑来锁死地球的科学研究。

observe( Node target, optional MutationObserverInit options );

disconnect();

takeRecords();

主要说observe()方法，在实现水印不可删除的过程中,主要需要应对的逻辑有两个，第一种是对水印节点的修改，第二种是对水印节点的删除。
先说第一种，observe( Node target, optional MutationObserverInit options )，接受两个参数，第一个是目标节点，第二个是目标节点需要被监控的属性，包括属性，子节点，甚至所有后代节点都可以监控。

  drawCanvas() {

        let divContainer = document.body.appendChild(document.createElement("div"));
        let waterMarkercanvas = document.createElement("canvas");
        let context = waterMarkercanvas.getContext("2d");

        divContainer.appendChild(waterMarkercanvas);
        divContainer.id = "divContainer"
        let backgroundUrl = null;

        divContainer.style.height = window.innerHeight + "px";
        divContainer.style.width = window.innerWidth + "px";


        waterMarkercanvas.width = this.option.canvasWidth;
        waterMarkercanvas.height = this.option.canvasHeight;



        context.font =this.option.font;
        context.textAlign = this.option.textAlign;
        context.fillStyle = this.option.textStyle;
        context.translate(waterMarkercanvas.width / 2,waterMarkercanvas.height / 2);
        context.rotate(this.option.degree * Math.PI / 180);
        context.fillText(this.option.text, 0, 0);

        backgroundUrl = waterMarkercanvas.toDataURL("image/png");
        divContainer.style.backgroundImage = `url(${backgroundUrl})`;


    }

在上面的代码里，我首先canvas画出来之后，转为png格式的图片，最后设置成了div的背景图片。

也就是说id为divContainer的div就是我需要监控的dom节点。这时我只需要

    canvasObserver() {
        this.drawCanvas();
        let canvasObserver = new MutationObserver((mo) => {
            this.drawCnvas();
        });
        let config = { attributes: true, childList: true, characterData: true };
        console.log

        canvasObserver.observe(document.querySelector("#divContainer"), config);
    }

就可以实现在用户修改divContainer这个节点是实现canvas的重绘。

第二种，因为MutationObserver本山来讲，是不支持监控本本身节点的删除操作的，也就是说，我如果删除了divContainer这个节点，是无法实现canvas的重绘的。
那么，这时就需要到一个新的办法了，那就是监控body节点

    canvasObserver() {
        this.drawCanvas();
        let canvasObserver = new MutationObserver((mo) => {
            console.log(mo.removeNodes)
            // this.drawCanvas();
            // console.log("detect canvas change and redraw")
        });
        let config = { attributes: true, childList: true, characterData: true };
        console.log

        canvasObserver.observe(document.querySelector("#divContainer").parentNode, config);
    }

因为在第一段代码中，我们把该节点作为了body节点的子节点，如果该节点变化，body节点的水滴肯定可以检测到，并且完成重绘。因为在我们的开发中，body节点承载着所有的页面内容，若删除body节点那么也就没有水印的意义了。
这时需要一个就需要一个MutationObserver()中的一个MutationRecord对象。

可以看到MutationObserver()有一个takeRecords函数来纪录监控中所有节点增查删改的操作，并且返回到MutationRecord对象中。

可以看到我执行了removeNode的操作并且被记录在了MutationRecord这个对象中。

canvasObserver() {
        this.drawCanvas();
        let canvasObserver = new MutationObserver((mo) => {
            console.log(mo[0].removedNodes)
            // this.drawCanvas();
            // console.log("detect canvas change and redraw")
        });
        let config = { attributes: true, childList: true, characterData: true };
        console.log

        canvasObserver.observe(document.querySelector("#divContainer").parentNode, config);
    }

这是修改后的代码，我们只要匹配一个被删除的div和canvas的div是一致的就可以进行下一步的重绘操作了。

https://github.com/AplloBattl...

这是github地址。