前端水印实现

点击查看代码

      class WaterMark {
        constructor(el, content) {
          this.el = el;
          this.content = content;
          this.observer = null;
          this.config = { attributes: true, childList: true, subtree: true };
          this.init();
        }
        init() {
          this.createContext(this.el);
        }
        createContext(elem) {
          const { offsetWidth, offsetHeight } = elem;
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          canvas.width = offsetWidth;
          canvas.height = offsetHeight;
          canvas.style.position = "absolute";
          canvas.style.pointerEvents = "none";
          canvas.style.top = "0px";
          canvas.style.left = "0px";
          canvas.style.zIndex = "99";
          ctx.font = "24px serif";
          ctx.rotate((-20 * Math.PI) / 180);
          ctx.fillStyle = "rgba(180, 180, 180, 0.6)";
          ctx.textAlign = "left";
          ctx.textBaseline = "middle";
          //   循环在canvas中渲染
          for (let i = 0; i < canvas.width / 100; i++) {
            for (let j = 0; j < canvas.height / 50; j++) {
              ctx.fillText(this.content, i * 200, j * 100 + 20);
            }
          }
          elem.appendChild(canvas);
          this.createObserver(elem);
          // 添加监听
        }
        createObserver(elem) {
          if (this.observer) this.observer.disconnect();
          this.observer = new MutationObserver((changeList, watcher) => {
            Array.from(changeList).forEach((record) => {
              const { removedNodes } = record;
              const removeNodeNames = Array.from(removedNodes).map(
                (node) => node.nodeName
              );
              if (removeNodeNames.includes("CANVAS")) {
                window.requestIdleCallback(() => this.createContext(elem), {
                  timeout: 300,
                });
              }
            });
          });
          this.observer.observe(elem, this.config);
        }
      }
      const elem = document.getElementById("content");
      const waterMark = new WaterMark(elem, "hello, world");