网页添加水印

<div  id="content"></div>

 drawWater(text) {
 //添加水印父级dom
      let content = document.getElementById("content");
      let divContainer = document.body.appendChild(
        document.createElement("div")
      );
      content.appendChild(divContainer);
      divContainer.id = "water";
      let canvas = document.createElement("canvas");
      canvas.id = "canvas";
      canvas.width = 200; //设置画布宽度
      canvas.height = 200; //设置画布高度
      canvas.style.display = "none"; //隐藏画布本身
      const ctx = canvas.getContext("2d"); //获取画笔
      ctx.font = "16px"; //设置文字大小
      ctx.fillStyle = "rgba(0,0,0,.3)"; //设置文字颜色及透明度
      ctx.rotate(-0.4); //设置文字旋转角度
      ctx.fillText(text, canvas.width / 6, canvas.height / 2); //设置显示文字内容
      //参数默认为 image/png,可以是其他image/jpeg等，该方法返回值是一个url，是base64组成的图片的源数据、可以直接赋值给图片的src属性
      const img = canvas.toDataURL("image/png"); 
      const style = `background-image:url(${img});`; //定义样式
      divContainer.setAttribute("style", style); //给要添加水印的元素设置样式
    },

 mounted() {
    let text = "这是水印";
    this.drawWater(text);
    let callback = mutations => {
      mutations.forEach(mutation => {
        if (
          mutation.removedNodes.length > 0 &&
          mutation.removedNodes[0].id == "water" &&
          mutation.addedNodes.length <= 0
        ) {
          this.drawWater(text);
        }
      });
    };
    
    //监听dom变化，当水印被删除时，马上重新渲染。
    let observer = new MutationObserver(callback);
    observer.observe(document.getElementById("content"), {
      childList: true
    });
  },