canvas实现水印效果

1.实现思路

1.使用canvas生成水印文字
2.将 canvas 转换为 base64 URL
3.使用background 平铺，绝对定位和层级设置置顶
4.设置pointer-events = none取消水印图层的相应事件

2.代码实现

<div id="watermark">
        <p>内容内容内容内容</p>
    </div>
 
    <script>
        // 定义水印函数
        function addWatermark({
            container = document.body, // 水印添加到的容器，默认为 body
            width = "300px", // 水印 canvas 的宽度
            height = "250px", // 水印 canvas 的高度
            textAlign = "center", // 水印文字的对齐方式
            textBaseline = "middle", // 水印文字的基线
            font = "16px Microsoft Yahei", // 水印文字的字体
            fillStyle = "rgba(184, 184, 184, 0.6)", // 水印文字的填充样式
            content = "水印", // 水印文字的内容
            content2 = "水印", // 水印文字的内容
            rotate = "15", // 水印文字的旋转角度
            zIndex = 10000, // 水印的 z-index 值
        }) {
            // 生成水印 canvas
            const canvas = document.createElement("canvas");
            canvas.setAttribute("width", width);
            canvas.setAttribute("height", height);
            const ctx = canvas.getContext("2d");
            ctx.textAlign = textAlign;
            ctx.textBaseline = textBaseline;
            ctx.font = font;
            ctx.fillStyle = fillStyle;
            ctx.rotate((Math.PI / 180) * rotate);
            ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 3);
            ctx.fillText(content2, parseFloat(width) / 2, parseFloat(height) / 2);
 
            // 将 canvas 转换为 base64 URL
            const base64Url = canvas.toDataURL();
            const __wm = document.querySelector('.__wm');
            const watermarkDiv = __wm || document.createElement("div");
            const styleStr = `
                        position: fixed;
                        top: 0;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        width: 100%;
                        height: 100%;
                        z-index: ${zIndex};
                        pointer-events: none;
                        background-repeat: repeat;
                        background-image: url('${base64Url}')
                    `;  
            watermarkDiv.setAttribute("style", styleStr);
            watermarkDiv.classList.add("__wm"); 
           //则创建一个 div 并设置样式和类名
 
            if (!__wm) {
                container.style.position = 'relative';
                container.insertBefore(watermarkDiv, container.firstChild);
            }
              // 监听容器变化，当容器发生变化时重新调用 addWatermark 函数
              const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
                if (MutationObserver) {
                    let mo = new MutationObserver(function () {
                        const __wm = document.querySelector('.__wm');
                        // 只在__wm元素变动才重新调用__canvasWM
                        if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
                            // 避免一直触发
                            mo.disconnect();
                            mo = null;
                            console.log('1');
                            addWatermark({
                                container: document.getElementById("watermark"),
                                width: "300px",
                                height: "250px",
                                textAlign: "center",
                                textBaseline: "middle",
                                font: "16px Microsoft Yahei",
                                fillStyle: "rgba(184, 184, 184, 0.3 )",
                                content: "系统  ",
                                content2: "用户名  ",
                                rotate: "15",
                                zIndex: 10000,
                            });
                        }
                    });
 
                    mo.observe(container, {
                        attributes: true,
                        subtree: true,
                        childList: true
                    });
                }
        }
 
 
 
        // 调用 addWatermark 函数添加水印
        addWatermark({
            container: document.getElementById("watermark"),
            width: "600px",
            height: "250px",
            textAlign: "center",
            textBaseline: "middle",
            font: "16px Microsoft Yahei",
            fillStyle: "rgba(184, 184, 184, 0.3 )",
            content: " 系统 ",
            content2: "用户名  ",
            rotate: "15",
            zIndex: 10000,
        });

    </script>