canvas设置网页水印，并通过 MutationObserver监视水印的修改、删除

 // 设置水印
        setWaterMask() {
            const userInfo = JSON.parse(sessionStorage.getItem('bsl_username'))
            if (userInfo === null || userInfo['userName'] === undefined) {
                if (this.timer === null) {
                    this.timer = setInterval(() => {
                        console.log('拿到用户信息设置水印')
                        this.setWaterMask()
                    }, 1000)
                }
                return
            } else {
                if (this.timer) {
                    clearInterval(this.timer)
                    this.timer = null
                }
            }

            let width = '150px',
                height = '100px',
                textAlign = 'center',
                textBaseline = 'middle',
                font = '14px microsoft yahei',
                fillStyle = 'rgba(0,0,0,0.2)',
                content = userInfo['userName']
            const canvas = document.createElement('canvas')
            canvas.setAttribute('width', width)
            canvas.setAttribute('height', height)
            let ctx = canvas.getContext('2d')
            ctx.textAlign = textAlign
            ctx.textBaseline = textBaseline
            ctx.font = font
            ctx.fillStyle = fillStyle
            ctx.translate(parseFloat(width) / 2, parseFloat(height) / 2)
            ctx.rotate((-15 * Math.PI) / 180)
            ctx.fillText(content, 0, 0)
            let base64Url = canvas.toDataURL()
            const divStyleStr = `   position: fixed;
                                    left: 0;
                                    top: 100px;
                                    width:100%;
                                    height:100%;
                                    z-index: 1;
                                    pointer-events: none;
                                    user-select: none;
                                    background-repeat: repeat;
                                    overflow: hidden;
                                    background-image: url("${base64Url}");`

            const waterDom = document.querySelector('#waterMark')
            waterDom.setAttribute('style', divStyleStr)
            //监听到水印被删除 刷新页面
            if (waterDom) {
                const whiteNames = ['张三', '李四']
                this.observer = new MutationObserver(function (mutationsList) {
                    for (let mutation of mutationsList) {
                        if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
                            const removeNode = mutation.removedNodes[0]
                            if (removeNode === waterDom) {
                                if (whiteNames.indexOf(userInfo.userName) === -1) {
                                    window.location.reload()
                                }
                                break
                            }
                        }
                    }
                })
                this.observer.observe(this.$el, { childList: true })
            }
        beforeDestroy() {
        	//组件销毁，停止观察
            this.observer && this.observer.disconnect()
        },

MutationObserver API说明

MDN文档地址

// 选择需要观察变动的节点
const targetNode = document.getElementById("some-id");

// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };

// 当观察到变动时执行的回调函数
const callback = function (mutationsList, observer) {
  // Use traditional 'for loops' for IE 11
  for (let mutation of mutationsList) {
    if (mutation.type === "childList") {
      console.log("A child node has been added or removed.");
    } else if (mutation.type === "attributes") {
      console.log("The " + mutation.attributeName + " attribute was modified.");
    }
  }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 之后，可停止观察
observer.disconnect();