javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript水印

JavaScript实现水印效果的示例代码

作者:一个爬坑的Coder

这篇文章主要为大家详细介绍了JavaScript如何利用canvas实现添加水印的效果,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下

效果

实现思路

实现步骤

动态生成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做为遮罩层背景图

// 生成水印遮罩层
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();

到此这篇关于JavaScript实现水印效果的示例代码的文章就介绍到这了,更多相关JavaScript水印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文