【H5】在H5页面中添加水印，同时监听元素变化达到阻止删除的效果

直接上代码

function setWatermark(text) {
  const id = '__global_watermark';

  const existing = document.getElementById(id);
  if (existing) document.body.removeChild(existing);
 
  //创建canvas画板，用作单个水印图片生成
  const canvas = document.createElement('canvas');
  canvas.width = 200;
  canvas.height = 150;

  //创建画笔，将水印文本写入canvas对象
  const ctx = canvas.getContext('2d');
  ctx.rotate(-20 * Math.PI / 180);
  ctx.font = '16px sans-serif';
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, canvas.width / 2, canvas.height / 2);

  //转换为base64
  const base64Url = canvas.toDataURL();

  //创建div节点，用于显示水印
  const div = document.createElement('div');
  div.id = id;
  div.style.pointerEvents = 'none';
  div.style.position = 'fixed';//固定定位
  div.style.top = '0';
  div.style.left = '0';
  div.style.zIndex = '9999';
  div.style.width = '100%';
  div.style.height = '100%';
  div.style.background = `url('${base64Url}') repeat`;//自动repeat铺满屏幕

  document.body.appendChild(div);

  //监听页面变化
  const observer = new MutationObserver(() => {
    //如果水印删掉就重新打上
    if (!document.getElementById(id)) {
      setWatermark(text);//打水印
    }
  });

  observer.observe(document.body, {
    childList: true,//监听子节点变化
  });
}

微信扫码查看本文