JavaScript实现水印效果

效果

实现思路

1. 利用canvas绘制出文字
2. 将canvas作为遮罩层背景图, 将背景x轴和y轴重复

实现步骤

动态生成canvas并画出文字

1. 生成canvas节点，设置宽高
2. 平移canvas对象，然后旋转（可以理解成，设置旋转基点，默认是根据左上角旋转的）
3. 设置字体样式
4. 将文字绘制到canvas上

const canvas = document.createElement("canvas");
canvas.width = len * fontSize; // canvas宽度, 目前是根据文字长度和大小来调整的, 自己可依照具体需求变动
canvas.height = height + fontSize * 2.8; // canvas高度, 依据需求调整

const context = canvas.getContext("2d");
context.translate(0, canvas.height / 2); // 改变旋转基点
context.rotate((-rotate * Math.PI) / 180); // 进行旋转, 传过来的旋转角度
context.font = `${fontSize}px Vedana`; // 设置字体
context.fillStyle = color; // 设置文字颜色

// 将需要的文本, 绘制到canvas上面
context.fillText(text, 10, canvas.height / 2 - 100);

将canvas做为遮罩层背景图

1. 生成一个遮罩层的节点并设置样式
2. 将上面生成的canvas转成base64的图片，然后作为遮罩层的背景图片（toDataURL方法）
3. 最后追加到body中

// 生成水印遮罩层
const div = document.createElement("div");
div.id = DOM_ID;
div.style.pointerEvents = "none";
div.style.position = "fixed";
div.style.zIndex = zIndex;
div.style.left = "-32%";
div.style.top = "-32%";
div.style.opacity = opacity;
div.style.width = "150%";
div.style.height = "150%";
div.style.background = `url('${canvas.toDataURL("images/png")}')repeat left top`;

document.body.appendChild(div);

防止篡改水印

利用MutationObserverAPI来对遮罩层做监听, 防止属性修改或者dom节点被人为的删除

MDN: MutationObserver

/**
 * 监听dom变化, 防止水印被篡改
 */
static observeDomChange = (waterMarkDom, options) => {
  const callback = (mutationsList, observer) => {
    for (const mutation of mutationsList) {
      /**
       * 水印节点的属性发生了变动
       */
      if (mutation.target === waterMarkDom) {
        this.setWaterMark(); // 重新生成水印
        observer.disconnect(); // 停止观察
      }

      /**
       * 强行手动删除了水印节点
       */
      if (mutation.removedNodes.length && mutation.removedNodes[0] === waterMarkDom) {
        this.setWaterMark(this.options); // 重新生成水印
        observer.disconnect(); // 停止观察
      }
    }
  };

  this.observer = new MutationObserver(callback);

  /** 监听body */
  this.observer.observe(document.querySelector("body"), {
    attributes: true, // 观察属性变动
    childList: true, // 观察目标子节点的变化，是否有添加或者删除
    subtree: true, // 观察后代节点，默认为 false
  });
};

所有代码

const DOM_ID = "yss-cj-create";

/**
 * 水印的默认属性
 */
const DEFAULT_OPTIONS = {
  text: "cxk  管理员  20230424",
  width: 520, // 水印块的宽度
  height: 280, // 水印块的高度
  rotate: 20, // 水印块的旋转角度
  fontSize: 28, // 文字大小
  color: "#666", // 文字颜色
  opacity: "0.3", // 遮罩层的透明度
  zIndex: "9999999999", // 遮罩层的层级
};

class Watermark {
  options = {};
  observer = null;

  /**
   * 生成水印
   */
  static setWaterMark = (options = {}) => {
    const waterDom = document.getElementById(DOM_ID);
    if (waterDom !== null) {
      // 每次重新绘制之前, 需要判断是否已经存在, 如果存在了就先删除, 再来重新绘制
      document.body.removeChild(waterDom);
    }

    const latestOptions = { ...DEFAULT_OPTIONS, ...options };
    this.options = latestOptions;

    const {
      text,
      width, // 宽度是根据提供的文字大小和文字长度计算出来的, 这里就用不上了
      height, // 水印块的高度
      rotate, // 水印块的旋转角度
      fontSize, // 文字大小
      color, // 文字颜色
      opacity, // 遮罩层的透明度
      zIndex, // 遮罩层的层级
    } = latestOptions;

    const len = text.length;
    const canvas = document.createElement("canvas");
    canvas.width = len * fontSize;
    canvas.height = height + fontSize * 2.8;

    const context = canvas.getContext("2d");
    context.translate(0, canvas.height / 2);
    context.rotate((-rotate * Math.PI) / 180);
    context.font = `${fontSize}px Vedana`; // 设置字体
    context.fillStyle = color; // 设置文字颜色

    // 将需要的文本, 绘制到canvas上面
    context.fillText(text, 10, canvas.height / 2 - 100);

    // 生成水印遮罩层
    const div = document.createElement("div");
    div.id = DOM_ID;
    div.style.pointerEvents = "none";
    div.style.position = "fixed";
    div.style.zIndex = zIndex;
    div.style.left = "-32%";
    div.style.top = "-32%";
    div.style.opacity = opacity;
    div.style.width = "150%";
    div.style.height = "150%";
    div.style.background = `url('${canvas.toDataURL("images/png")}')repeat left top`;

    document.body.appendChild(div);

    /**
     * 监听水印的dom变化
     */
    this.observeDomChange(div);
  };

  /**
   * 去除水印
   */

  static removeWatermark = () => {
    const dom = document.getElementById(DOM_ID);
    if (dom !== null) {
      document.body.removeChild(dom);
    }
  };

  /**
   * 监听dom变化, 防止水印被篡改
   */
  static observeDomChange = (waterMarkDom, options) => {
    const callback = (mutationsList, observer) => {
      for (const mutation of mutationsList) {
        /**
         * 水印节点的属性发生了变动
         */
        if (mutation.target === waterMarkDom) {
          this.setWaterMark(); // 重新生成水印
          observer.disconnect(); // 停止观察
        }

        /**
         * 强行手动删除了水印节点
         */
        if (mutation.removedNodes.length && mutation.removedNodes[0] === waterMarkDom) {
          this.setWaterMark(this.options); // 重新生成水印
          observer.disconnect();
        }
      }
    };

    this.observer = new MutationObserver(callback);

    /** 监听body */
    this.observer.observe(document.querySelector("body"), {
      attributes: true, // 观察属性变动
      childList: true, // 观察目标子节点的变化，是否有添加或者删除
      subtree: true, // 观察后代节点，默认为 false
    });
  };
}

Watermark.setWaterMark();

参考资料:

• https://github.com/zifeifish/watermark-package