页面加水印业务:

使用canvas绘制叠层

注意点:

1.防止删除和防止修改:使用mutationObserver

2.自适应

<!DOCTYPE html>
<html> <head>
<title>Canvas 水印示例</title>
<style>
    canvas {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    } 
</style> 
</head>
<body>
    <canvas id="watermarkCanvas"></canvas>
    <!-- 此处是页面内容 -->
    <script>
    // 获取 Canvas 元素和上下文 
    const canvas = document.getElementById('watermarkCanvas'); 
    const ctx = canvas.getContext('2d'); 
    // 设置 Canvas 大小和样式 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 
    canvas.style.zIndex = '9999'; 
    // 设置水印样式 ctx.font = '24px Arial'; 
    ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
    ctx.textAlign = 'center'; 
    ctx.textBaseline = 'middle';
    ctx.rotate(-Math.PI / 4);
    // 可选：旋转水印角度 
    // 绘制水印文本 
    const watermarkText = 'Watermark';
    ctx.fillText(watermarkText, canvas.width / 2, canvas.height / 2); 
    // 可选：监听窗口大小变化，调整 Canvas 大小 
    window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight; 
    }); 
    </script> 
</body> 
</html>

mutationObserver

用于监视dom的变化并作出相应的响应,它可以用于观察dom节点的添加、删除、属性修改等操作,并触发相应的回调函数

使用mutationObserver可以捕捉到以下类型的dom变化:

1.节点添加或者删除

2.属性修改

3.子节点变化:例如添加、删除、移动子节点

<html> 
<head> 
    <title>MutationObserver 示例</title> 
</head> 
<body>
    <div id="target">目标节点</div> 
<script>
    // 创建 MutationObserver 实例
    const observer = new MutationObserver((mutationsList, observer) => {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') { 
                console.log('子节点发生变化');
            } else if (mutation.type === 'attributes') { 
                console.log('属性发生变化');
            }
        } 
    });
    // 监听目标节点及其子节点的变化
    const targetNode = document.getElementById('target');
    const config = { attributes: true, childList: true, subtree: true }; 
    observer.observe(targetNode, config); 
    // 修改目标节点，触发回调 
    targetNode.innerHTML = '修改后的内容'; 
    targetNode.setAttribute('data-test', '123');
</script>
</body> 
</html>

如何实现页面加水印

页面加水印业务:

mutationObserver