js waterMark，水印实现的三种方法，并防止去除

一、js水印-div标签

效果图:

实现代码:

方法调用
// js水印-div
weaterMaskFn({
  text: '社会王老板-div水印', // 水印文案
  opacity: '0.5', // 透明度
  fontSize: '14px', // 字体大小
  color: '#09f', // 字体颜色
  rotate: '-30', // 旋转角度deg
  marginTop: 150, // 两个水印上下间距
});

方法封装
export let weaterMaskFn = (params = {}) => {
    let waterMarkDiv = document.createElement('div');
    document.body.appendChild(waterMarkDiv);
    let wrapNum = 15, // 15个换行。
        top = -30, // 距离顶部距离。
        text = params.text || '王老板水印'; // 水印文案。

    // 修改left、top距离，实现满屏水印效果。
    let wrapFn = (i, type) => {
        let multiple = Math.floor(i / wrapNum);
        if (type == 'left') {
            let temp = i * 200 + 'px';
            temp = (i - multiple * wrapNum) * 200 + 'px';
            return temp;
        }
        if (type == 'top') {
            let temp = top + 'px';
            temp = (top + (params.marginTop || 150) * multiple) + 'px';
            return temp;
        }
    }

    // 循环，创建多个水印。
    for (var i = 0; i < 80; i++) {
        let span = document.createElement('span');
        span.style.position = 'fixed';
        span.style.zIndex = '999999';
        span.style.whiteSpace = 'nowrap'; // 禁止文字换行
        span.style.padding = '100px';
        span.style.transform = `rotate(${params.rotate || '-30'}deg)`; // 旋转-30deg。
        span.style.fontSize = params.fontSize || '14px';
        span.style.pointerEvents = 'none'; // css事件穿透
        span.style.color = params.color || '#0f0';
        span.style.left = wrapFn(i, 'left');
        span.style.top = wrapFn(i, 'top');
        span.style.opacity = params.opacity || 0.5;
        span.innerText = text;
        waterMarkDiv.appendChild(span);
    }

}

二、js水印-canvas标签

效果图:

实现代码:

方法调用
weaterMaskCanvasFn({
  text: '绘制水印-canvas水印', // 水印文案
  opacity: '.5', // 透明度
  fontSize: '18', // 字体大小
  color: '#0f0', // 字体颜色
  rotate: '-30', // 旋转角度deg
  len: 6, // 相邻文字间距
})

方法封装
export let weaterMaskCanvasFn = (params = {}) => {
    let len = params.len || params?.text?.length || 3; // 可通过此数值大小，控制相邻文字的间距。
    const canvas = document.createElement('canvas');
    let fontSize = params.fontSize || 14,
        height = 180;
    canvas.width = len * fontSize * 2.2; // 可根据实际效果，修改2.2值
    canvas.height = height + fontSize * 1.8;

    const context = canvas.getContext('2d');
    context.translate(0, canvas.height / 1.8);
    context.rotate(((params.rotate || -30) * Math.PI) / height);
    context.font = `${fontSize}px Vedana`;
    context.fillStyle = params.color || '#f0f';

    context.fillText(params.text, 10, canvas.height / 2 - 100);

    const div = document.createElement('div');
    div.style.pointerEvents = 'none';
    div.style.position = 'fixed';
    div.style.zIndex = '999999';
    div.style.left = '-32%';
    div.style.top = '-32%';
    div.style.opacity = params.opacity || 0.5;
    div.style.width = '150%';
    div.style.height = '150%';
    div.style.background = `url(${canvas.toDataURL('images/png')}) repeat left top`;

    document.body.appendChild(div);
}

三、css图片水印，伪类元素图片水印

效果图:

实现代码:

dom元素
<div class="watermask-class"></div>

css样式
/* css水印 */
.watermask-class {
  position: fixed;
  overflow: hidden;
  background-color: transparent;
}

.watermask-class::before {
  content: '';
  position: fixed;
  width: 160%;
  height: 160%;
  top: -21%;
  left: -42%;
  z-index: 999;
  /* 引入的图片路径 */
  background-image: url('./assets/watermark-bg-icon.png');
  background-position: 0 0;
  background-origin: content-box;
  background-attachment: scroll;
  /* 透明度 */
  opacity: .3;
  /* 旋转角度 */
  transform: rotate(-30deg);
  background-size: auto;
  background-repeat: round;
  pointer-events: none;
}

css引入的图片:

防止水印删除

let observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.removedNodes.length > 0 && mutation.removedNodes[0].id == 'waterMarkDiv') {
          console.log('div水印被删除，需重新生成!');
          // 重新添加水印
          weterMaskFn({
            text: '社会王老板-div水印', // 水印文案
            opacity: '0.5', // 透明度
            fontSize: '14px', // 字体大小
            color: '#09f', // 字体颜色
            rotate: '-30', // 旋转角度deg
            marginTop: 150, // 两个水印上下间距
          });
        }

        if (mutation.removedNodes.length > 0 && mutation.removedNodes[0].id == 'waterMaskCanvas') {
          console.log('canvas水印被删除，需重新生成!');
          // 重新添加水印
          weterMaskCanvasFn({
            text: '绘制水印-canvas水印',
            opacity: '.5',
            fontSize: '18',
            color: '#0f0',
            rotate: '-30',
            len: 6,
          })
        }

        if (mutation.removedNodes.length > 0 && mutation.removedNodes[0].id == 'watermask-class') {
          console.log('css水印被删除，需重新生成!');
          // 重新添加水印
          let div = document.createElement('div');
          div.id = 'watermask-class';
          div.className = 'watermask-class';
          document.getElementById('app').appendChild(div)
        }
      })
    })

    // 父元素容器。注意，这里是放置水印的父容器。
    let fatherDom = document.body;
    // let fatherDom = document.getElementById('app');

    observer.observe(fatherDom, {
      childList: true,
      attributes: true,
      subtree: true,
      attributeOldValue: true,
      characterData: true,
      characterDataOldValue: true,
    })