页面水印svg

最新推荐文章于 2024-06-26 17:32:13 发布

werch

最新推荐文章于 2024-06-26 17:32:13 发布

阅读量278

点赞数 1

分类专栏：水印文章标签： SVG 水印 JavaScript 动态生成网页元素

本文链接：https://blog.csdn.net/weixin_42666092/article/details/125890473

版权

水印专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 2000px;
        height: 1000px;
    }
</style>

<body>
    <div>
        wwwwwww
    </div>
</body>
<script>
    (function () {
        // svg 实现 watermark
        function __svgWM({
            // container = document.body,
            container = document.body,
            content = '请勿外传',
            width = '300px',
            height = '200px',
            opacity = '0.2',
            fontSize = '20px',
            zIndex = 1000
        } = {}) {
            const args = arguments[0];
            const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
                                <text x="50%" y="50%" dy="12px"
                                    text-anchor="middle"
                                    stroke="#000000"
                                    stroke-width="1"
                                    stroke-opacity="${opacity}"
                                    fill="none"
                                    transform="rotate(-45, 120 120)"
                                    style="font-size: ${fontSize};">
                                    ${content}
                                </text>
                                </svg>`;
            const base64Url = `data:image/svg+xml;base64,${window.btoa(unescape(encodeURIComponent(svgStr)))}`;
            const __wm = document.querySelector('.__wm');

            const watermarkDiv = __wm || document.createElement("div");

            watermarkDiv.setAttribute('style', `
                                        position:absolute;
                                        top:0;
                                        left:0;
                                        width:${container.scrollWidth};
                                        height:${container.scrollHeight};
                                        z-index:${zIndex};
                                        pointer-events:none;
                                        background-repeat:repeat;
                                        background-image:url('${base64Url}')`);

            container.style.position = 'relative';
            container.insertBefore(watermarkDiv, container.firstChild);



            const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
            if (MutationObserver) {
            let mo = new MutationObserver(function () {
                const __wm = document.querySelector('.__wm');
                // 只在__wm元素变动才重新调用 __svgWM
                if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
                // 避免一直触发
                mo.disconnect();
                mo = null;
                __svgWM(JSON.parse(JSON.stringify(args)));
                }
            });
    
            mo.observe(container, {
                attributes: true,
                subtree: true,
                childList: true
            })
            }


            if (typeof module != 'undefined' && module.exports) {  //CMD
                module.exports = __svgWM;
            } else if (typeof define == 'function' && define.amd) { // AMD
                define(function () {
                return __svgWM;
                });
            } else {
                window.__svgWM = __svgWM;
            }

        }
      
        //调用
            __svgWM({
                content: 'FE444svggg'
            })
    })();
</script>

</html>