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

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

observe( Node target, optional MutationObserverInit options );

disconnect();

takeRecords();

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

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

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

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

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

因?yàn)樵诘谝欢未a中，我們把該節(jié)點(diǎn)作為了body節(jié)點(diǎn)的子節(jié)點(diǎn)，如果該節(jié)點(diǎn)變化，body節(jié)點(diǎn)的水滴肯定可以檢測到，并且完成重繪。因?yàn)樵谖覀兊拈_發(fā)中，body節(jié)點(diǎn)承載著所有的頁面內(nèi)容，若刪除body節(jié)點(diǎn)那么也就沒有水印的意義了。
這時(shí)需要一個(gè)就需要一個(gè)MutationObserver()中的一個(gè)MutationRecord對(duì)象。

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

可以看到我執(zhí)行了removeNode的操作并且被記錄在了MutationRecord這個(gè)對(duì)象中。

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

這是修改后的代碼，我們只要匹配一個(gè)被刪除的div和canvas的div是一致的就可以進(jìn)行下一步的重繪操作了。

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

這是github地址。