网页加水印 svg 方式

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

weixin_30851409

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

阅读量576

点赞数

CC 4.0 BY-SA版权

文章标签： java json

原文链接：http://www.cnblogs.com/shenjilin/p/9856574.html

本文介绍了一种使用SVG格式在网页上添加水印的方法，详细解释了如何通过JavaScript动态生成SVG水印，并将其作为背景应用到指定的DOM元素中，确保水印的可见性和稳定性。

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

    
    /**
 *网页加水印 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;
    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元素变动才重新调用 __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 : "申继林"});
    };