svg画前端水印

最新推荐文章于 2024-12-16 16:15:06 发布

dirty_rabbit

最新推荐文章于 2024-12-16 16:15:06 发布

阅读量432

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： svg js 前端样式前端

本文链接：https://blog.youkuaiyun.com/dirty_rabbit/article/details/121542232

js 专栏收录该内容

1 篇文章

订阅专栏

这段代码展示了如何使用SVG创建动态的网页水印，水印内容可自定义，具有旋转、透明度调整等功能，并能随页面变化自动更新。适用于防止内容非法传播。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(function () {
  // svg 实现 watermark
  function __svgWM({
    container = document.body,
    content = '请勿外传',
    width = '100%',
    height = '100%',
    opacity = '0.8',
    fontSize = '12px',
    zIndex = 1000
  } = {}) {
    const args = arguments[0];
    let textStr = '',count = 0;
    for(var i=(document.body.offsetHeight*0.5)*-1;i<800;i+=200) {
      for(var j=0;j<document.body.offsetHeight*1.5;j+=40) {
        count++;
        if(count%2) {
          textStr +=`<text x='${i+90}' y='${j}' dy="12px"
            text-anchor="middle"
            stroke="#e1e5ea"
            stroke-width="1"
            stroke-opacity="${opacity}"
            transform="rotate(-35, 120 120)"
            fill="none"
            style="font-size: ${fontSize};">
            ${content}
          </text>`
        }else {
          textStr +=`<text x='${i}' y='${j}' dy="12px"
            text-anchor="middle"
            stroke="#e1e5ea"
            stroke-width="1"
            stroke-opacity="${opacity}"
            transform="rotate(-35, 120 120)"
            fill="none"
            style="font-size: ${fontSize};">
            ${content}
          </text>`
        }
      }
    }
    const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${width}">${textStr}</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:no-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
      })
    }

  }

  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:`王丽丽   0256888`,
// })