zoukankan      html  css  js  c++  java
  • 网页加水印 svg 方式

        
        /**
     *网页加水印 svg 方式
     *
     * @export
     * @param {*} [{
     *   container = document.body,
     *   content = '请勿外传',
     *   width = '300px',
     *   height = '200px',
     *   opacity = '0.2',
     *   fontSize = '20px',
     *   zIndex = 1000
     * }={}]
     */
     function __waterDocumentSvg({
      container = document.body,
      content = '请勿外传',
      width = '120px',
      height = '200px',
      opacity = '0.2',
      fontSize = '20px',
      zIndex = 0
    } = {}) {
      const args = arguments[0];
      const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${width}">
    <text x="20%" y="20%" dy="12px"
    text-anchor="middle"
    stroke="#000000"
    stroke-width="1"
    stroke-opacity="${opacity}"
    fill="none"
    transform="rotate(-45, 100 10)"
    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;
        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元素变动才重新调用 __canvasWM
          if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
            // 避免一直触发
            mo.disconnect();
            mo = null;
            __waterDocumentSvg(JSON.parse(JSON.stringify(args)));
          }
        });
        mo.observe(container, {
          attributes: true,
          subtree: true,
          childList: true
        })
      }
    }
        
        //onload时触发水印绘制
        window.onload=function(){
            __waterDocumentSvg({content : "申继林"});
        };
  • 相关阅读:
    二:虚拟游戏摇杆
    一:AndEngine的小例子
    打造属于自己的安卓Metro界面
    linux设备驱动第四篇:驱动调试方法
    C# 二叉查找树实现
    初识 Angular 体会
    C# 霍夫曼二叉树压缩算法实现
    TypeScript笔记[5]泛型+Dictionary 转
    Axiom3D学习日记 5.Frame Listeners, and Input Handling
    Axiom3D学习日记 4.地形,天空,雾
  • 原文地址:https://www.cnblogs.com/shenjilin/p/9856574.html
Copyright © 2011-2022 走看看