console 命令行工具 X clear

console

/**
 * set 注入水印
 * close 关闭水印
 */
const watermark = {
    _observer: null,
    insertDom: document.body,
    set: function (text1, text2, config) {
        var canvas = document.createElement('canvas')
        canvas.width = 200;
        canvas.height = 120;
        canvas.style.display = 'none';
        var shuiyin = canvas.getContext('2d');
        // 控制文字的旋转角度和上下位置
        shuiyin.rotate(-20 * Math.PI / 180);
        shuiyin.translate(-50, 20)
        //文字颜色
        shuiyin.fillStyle = "#f2f2f2";
        //文字样式
        shuiyin.font = "100 16px Microsoft JhengHei ";
        shuiyin.fillText(text1, canvas.width / 3, canvas.height / 2);
        shuiyin.fillText(text2, canvas.width / 3, canvas.height / 2 + 20);
        /* 新建一个用于填充canvas水印的标签，之所以没有直接在body上添加，
           是因为z-index对个别内容影响，才考虑的不用body */
        var watermark = document.createElement('div')

        let styleStr = '';
        if (config.insert && document.querySelector(config.insert)) {
            styleStr = `
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:9999;
            pointer-events:none;
            background-repeat:repeat;
            mix-blend-mode: multiply;
            background-image:url('${canvas.toDataURL("image/png")}')`;
        } else {
            styleStr = `
            position:fixed;
            top:0;
            left:0;
            width:100vw;
            height:100vh;
            z-index:9999;
            pointer-events:none;
            background-repeat:repeat;
            mix-blend-mode: multiply;
            background-image:url('${canvas.toDataURL("image/png")}')`;
        }
        watermark.setAttribute('style', styleStr);
        watermark.classList.add('watermark')


        if (config.insert && document.querySelector(config.insert)) {
            this.insertDom = document.querySelector(config.insert)
        }

        this.insertDom.appendChild(watermark)

        //此方法是防止用户通过控制台修改样式去除水印效果
        /* MutationObserver 是一个可以监听DOM结构变化的接口。 */
        this._observer = new MutationObserver(() => {
            const wmInstance = document.querySelector('.watermark');
            if ((wmInstance && wmInstance.getAttribute('style') !== styleStr) || !wmInstance) {
                //如果标签在，只修改了属性，重新赋值属性
                if (wmInstance) {
                    // 避免一直触发
                    // observer.disconnect();
                    // console.log('水印属性修改了');
                    wmInstance.setAttribute('style', styleStr);
                } else {
                    /* 此处根据用户登录状态，判断是否终止监听，避免用户退出后登录页面仍然有水印 */
                    this.insertDom.appendChild(watermark)
                    // observer.disconnect();
                }
            }
        })
        this._observer.observe(this.insertDom, {
            attributes: true,
            subtree: true,
            childList: true,
        });
    },
    close: function () {
        /* 关闭页面的水印，即要移除水印标签 */
        this._observer.disconnect();
        let watermark = document.querySelector('.watermark')
        this.insertDom.removeChild(watermark)
    }
}
export default watermark

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=, initial-scale=">
	<meta http-equiv="X-UA-Compatible" content="">
	<title></title>
</head>
<body>
	
</body>
</html>

body{
    width: 100%;
    height: 100%;
}