摘要：有三個方法，分別是主要說方法，在實現(xiàn)水印不可刪除的過程中主要需要應(yīng)對的邏輯有兩個，第一種是對水印節(jié)點的修改，第二種是對水印節(jié)點的刪除。也就是說為的就是我需要監(jiān)控的節(jié)點。

MutationObserver 是一個觀察對象，提供用來當(dāng)DOM樹發(fā)生變化時開發(fā)者可以根據(jù)發(fā)生的變化，進行邏輯的變化。
就像三體中的水滴一樣，當(dāng)?shù)厍蛏铣霈F(xiàn)大型強子對撞研究時，會觸發(fā)一定的邏輯來鎖死地球的科學(xué)研究。

observe( Node target, optional MutationObserverInit options );

disconnect();

takeRecords();

主要說observe()方法，在實現(xiàn)水印不可刪除的過程中,主要需要應(yīng)對的邏輯有兩個，第一種是對水印節(jié)點的修改，第二種是對水印節(jié)點的刪除。
先說第一種，observe( Node target, optional MutationObserverInit options )，接受兩個參數(shù)，第一個是目標(biāo)節(jié)點，第二個是目標(biāo)節(jié)點需要被監(jiān)控的屬性，包括屬性，子節(jié)點，甚至所有后代節(jié)點都可以監(jiān)控。

  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畫出來之后，轉(zhuǎn)為png格式的圖片，最后設(shè)置成了div的背景圖片。

也就是說id為divContainer的div就是我需要監(jiān)控的dom節(jié)點。這時我只需要

    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);
    }

就可以實現(xiàn)在用戶修改divContainer這個節(jié)點是實現(xiàn)canvas的重繪。

第二種，因為MutationObserver本山來講，是不支持監(jiān)控本本身節(jié)點的刪除操作的，也就是說，我如果刪除了divContainer這個節(jié)點，是無法實現(xiàn)canvas的重繪的。
那么，這時就需要到一個新的辦法了，那就是監(jiān)控body節(jié)點

    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);
    }

因為在第一段代碼中，我們把該節(jié)點作為了body節(jié)點的子節(jié)點，如果該節(jié)點變化，body節(jié)點的水滴肯定可以檢測到，并且完成重繪。因為在我們的開發(fā)中，body節(jié)點承載著所有的頁面內(nèi)容，若刪除body節(jié)點那么也就沒有水印的意義了。
這時需要一個就需要一個MutationObserver()中的一個MutationRecord對象。

可以看到MutationObserver()有一個takeRecords函數(shù)來紀錄監(jiān)控中所有節(jié)點增查刪改的操作，并且返回到MutationRecord對象中。

可以看到我執(zhí)行了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地址。