Html页面添加水印

/ 前端 / 0 条评论 / 4438浏览

水印

前言

为什么加水印

避免企业内部系统被截图，防止团队劳动成果被窃取。不同用户登录将账号作为水印，显示在系统背景。

目标效果

水印效果图

完整代码

<!DOCTYPE html>
<html>
<head>
    <title>web页添加水印</title>
</head>
<body>
    <div style="width: 800px;height: 500px">你最棒</div>
</body>
<script type="text/javascript">

    //页面用来添加水印
    function __svgWM({container = document.body,content = '水印',width = '200px',height = '100px',opacity = '0.05',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(-15, 0 0)"
            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");


        const styleStr = `
            position:absolute;
            top:0;
            left: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');
    
        if (!__wm) {
            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
            });
        }
    }

    __svgWM({
        content: "你最棒"
    });

</script>

知识点

MutationObserver对象

 const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

MutationObserver 是一个可以监听DOM结构变化的接口。可以监听指定DOM节点下的全部节点变化，节点变化时触发。

参考文档.简书

svg对象

SVG 意为可缩放矢量图形（Scalable Vector Graphics）,SVG 使用 XML 格式定义图像。

实例1 旋转的文字

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>

效果

I love SVG

实例2 路径上的文字

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>

效果

I love SVG I love SVG

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名,转载请标明出处
最后编辑时间为: 2019/11/28 18:35