网页加水印

function warterDocumentSvg(content, container?: any, width?: number, height?: number, opacity?: string, strokeColor?: string, fontSize?: string, zIndex?: number) {
    if(!container) {
      container = document.body
    }

    if(!width) {
      width = 300
    }

    if(!height) {
      height = 200
    }

    if(!opacity) {
      opacity = '0.07'
    }

    if(!fontSize) {
      fontSize = '14px'
    }

    if(!strokeColor) {
      strokeColor = '#2E2D2D'
    }

    if(!zIndex) {
      zIndex = 1000
    }

    var svgStr = '<svg xmlns="http://www.w3.org/2000/svg" width="'
        + width
        + 'px" height="'
        + height
        + 'px"><text x="50%" y="50%" dy="12px" text-anchor="middle" stroke="'
        + strokeColor
        + '" stroke-width="0" fill-opacity="'
        + opacity
        + '" fill="'
        + strokeColor
        + '" transform="rotate(-25, '
        + (width /2)
        + ' '
        + (height/2)
        + ')" style="font-size: '
        + fontSize
        + ';">'
        + content
        + '</text> </svg>';
    var base64Url = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgStr)));
    var __wm = document.querySelector('.__wm');
    var watermarkDiv = __wm || document.createElement("div");
    var styleStr = 'position:fixed; 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.className = '__wm';
    if (!__wm) {
      container.style.position = 'relative';
      container.insertBefore(watermarkDiv, container.firstChild);
    }
  }

 

posted @ 2022-07-20 18:55  井凉一一  阅读(103)  评论(0编辑  收藏  举报