watermark-js-nine 1.0.0 → 1.0.2

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "watermark-js-nine",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A powerful web watermark component supporting text and image watermarks with tiling",
   "main": "dist/waterMark.js",
-  "module": "src/waterMark.ts",
+  "module": "dist/waterMark.js",
   "types": "dist/waterMark.d.ts",
   "scripts": {
     "build": "tsc",
@@ -25,7 +25,6 @@
   "license": "MIT",
   "files": [
     "dist",
-    "src",
     "README.md"
   ],
   "repository": {

package/src/waterMark.ts

@@ -1,1134 +0,0 @@
-// ===================== 类型定义 =====================
-export interface WatermarkConfig {
-  type: "text" | "image"; // 水印类型
-  tilling: boolean; // 是否平铺，true为全图水印，false为单个水印
-  // 文字水印配置
-  value?: string; // 水印文本（支持\n换行）
-  font?: string; // 字体，如 "20pt SimSun"
-  fillStyle?: string; // 文本颜色，如 "rgba(192,192,192,0.6)"
-  // 图片水印配置
-  image?: {
-    type?: string; // 图片类型 png/jpg
-    data?: string; // 图片base64数据
-    size?: [number, number]; // 图片大小 [width, height] 单位mm
-    opacity?: number; // 不透明度 0-100
-  };
-  // 通用配置
-  rotate?: number; // 旋转角度
-  offset?: [number, number]; // 偏移量 [x, y] 单位mm
-  horizontal?: number; // 横向间距mm（平铺时生效）
-  vertical?: number; // 纵向间距mm（平铺时生效）
-  place?: PlaceType; // 单个水印位置（单个水印时生效）
-  svgContainer?: SVGSVGElement; // SVG容器（内部使用）
-}
-
-type PlaceType =
-  | "topLeft"
-  | "topCenter"
-  | "topRight"
-  | "middleLeft"
-  | "middleCenter"
-  | "middleRight"
-  | "bottomLeft"
-  | "bottomCenter"
-  | "bottomRight";
-
-// ===================== 常量定义 =====================
-const NEW_PT_PER_INCH = 72;
-const NEW_MM_PER_INCH = 25.4;
-
-const PlaceMap: Record<string, PlaceType> = {
-  TL: "topLeft",
-  TC: "topCenter",
-  TR: "topRight",
-  ML: "middleLeft",
-  MC: "middleCenter",
-  MR: "middleRight",
-  BL: "bottomLeft",
-  BC: "bottomCenter",
-  BR: "bottomRight",
-};
-
-// ===================== 工具类 =====================
-class WatermarkUtils {
-  private static zoomValue = 1;
-
-  static setZoom(zoom: number) {
-    this.zoomValue = zoom || 1;
-  }
-
-  static getDpi(isPrint = false): number {
-    const zoom = isPrint ? 1 : this.zoomValue;
-    return zoom * 100 * 0.96;
-  }
-
-  static mm2px(mm: number, isPrint = false): number {
-    return (mm * this.getDpi(isPrint)) / NEW_MM_PER_INCH;
-  }
-
-  static mm2pxDpi(mm: number, dpi: number): number {
-    return Math.round((mm * dpi) / 25.4);
-  }
-
-  static pt2px(pt: number, isPrint = false): number {
-    return (pt * this.getDpi(isPrint)) / NEW_PT_PER_INCH;
-  }
-
-  static createSvgElement<T extends SVGElement>(
-    tagName: string,
-    id?: string
-  ): T {
-    const el = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      tagName
-    ) as T;
-    if (id) el.id = id;
-    return el;
-  }
-
-  static setAttr(el: Element, name: string, value: string | number): void {
-    el.setAttribute(name, String(value));
-  }
-
-  static getFontSize(font: string): number {
-    const fonts = font.split(" ");
-    for (const f of fonts) {
-      if (f.includes("pt")) {
-        return this.pt2px(parseFloat(f));
-      }
-      if (f.includes("px")) {
-        return parseFloat(f);
-      }
-    }
-    return 20;
-  }
-
-  static getTextMetrics(
-    text: string,
-    font: string
-  ): { width: number; height: number; lines: string[] } {
-    const fontSize = this.getFontSize(font);
-    const lines = text.split("\n");
-    let maxLen = 0;
-    for (const line of lines) {
-      const len = this.analyzeStringLength(line);
-      if (len > maxLen) maxLen = len;
-    }
-    return {
-      width: fontSize * maxLen,
-      height: fontSize * lines.length,
-      lines,
-    };
-  }
-
-  static analyzeStringLength(text: string): number {
-    let length = 0;
-    const regCn =
-      /[\u4e00-\u9fa5]|[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/;
-    for (const char of text) {
-      length += regCn.test(char) ? 1 : 0.5;
-    }
-    return length;
-  }
-
-  static getRotatedBounds(
-    width: number,
-    height: number,
-    rotateDeg: number
-  ): { offsetX: number; offsetY: number; newWidth: number; newHeight: number } {
-    const rad = (rotateDeg * Math.PI) / 180;
-    const sin = Math.sin(rad);
-    const cos = Math.cos(rad);
-    const newWidth = Math.abs(width * cos) + Math.abs(height * sin);
-    const newHeight = Math.abs(width * sin) + Math.abs(height * cos);
-    return {
-      offsetX: (newWidth - width) / 2,
-      offsetY: (newHeight - height) / 2,
-      newWidth,
-      newHeight,
-    };
-  }
-
-  static loadImage(src: string): Promise<{ width: number; height: number }> {
-    return new Promise((resolve, reject) => {
-      const img = new Image();
-      img.crossOrigin = "";
-      img.src = src;
-      img.onload = () => resolve({ width: img.width, height: img.height });
-      img.onerror = () => reject(new Error("图片加载失败"));
-    });
-  }
-
-  static isImageElement(el: HTMLElement): boolean {
-    return el.tagName.toLowerCase() === "img";
-  }
-  /**
-   * 获取图片的大小
-   * @param {String} base64 图片数据
-   * @returns 返回图片大小
-   */
-  static getImageSize(base64: string) {
-    const image = new Image();
-    image.crossOrigin = "";
-    image.src = base64;
-    return new Promise((resolve, reject) => {
-      image.onload = () =>
-        resolve({ width: image.width, height: image.height });
-      image.onerror = () => reject(new Error("图片加载失败"));
-    });
-  }
-
-  /**
-   * 获取水印旋转后的起始位置以及宽高
-   * @param {Number} width 水印原始宽
-   * @param {Number} height 水印原始高
-   * @param {Number} rotate 旋转角度
-   * @returns [x,y,w,h]
-   */
-  static getStart(width: number, height: number, rotate: number) {
-    // 1 计算旋转的弧度
-    let rad = (rotate * Math.PI) / 180;
-    // 2 计算弧度的正弦余弦值
-    let sin = Math.sin(rad);
-    let cos = Math.cos(rad);
-    // 获取旋转后的宽高
-    let nWidth = Math.abs(width * cos) + Math.abs(height * sin);
-    let nHeight = Math.abs(width * sin) + Math.abs(height * cos);
-    // 起始位置为新的宽(高)减去旧的宽（高） 的一半
-    let startX = (nWidth - width) / 2;
-    let startY = (nHeight - height) / 2;
-    return [startX, startY, nWidth, nHeight];
-  }
-
-  static getImageSizeByUrl(
-    url: string
-  ): Promise<{ width: number; height: number }> {
-    return new Promise((resolve) => {
-      const img = new Image();
-      img.src = url;
-      img.onload = () => {
-        resolve({ width: img.width, height: img.height });
-      };
-    });
-  }
-
-  static imageOnload(fun: () => Promise<boolean>): Promise<boolean> {
-    return new Promise(async (resolve) => {
-      const isOK = await fun();
-      if (isOK) {
-        resolve(isOK);
-      }
-    });
-  }
-  static getMaxOfArray(numArray: number[]) {
-    return Math.max.apply(null, numArray);
-  }
-}
-
-// ===================== 主水印类 =====================
-export default class NewWatermark {
-  private elementId: string;
-  private config: WatermarkConfig | Array<WatermarkConfig>;
-  private element: HTMLElement | null = null;
-  private isImageElement = false;
-  private isPrint: boolean;
-  private observer!: IntersectionObserver; // 监听水印是否正确加载
-
-  /**
-   * 创建水印实例
-   * @param elementId 目标元素的id
-   * @param config 水印配置
-   * @param isPrint 是否为打印模式
-   * @param zoom 缩放比例
-   */
-  constructor(
-    elementId: string,
-    config: WatermarkConfig | Array<WatermarkConfig>,
-    isPrint = false,
-    zoom = 1
-  ) {
-    this.elementId = elementId;
-    this.config = this.mergeDefaultConfig(config);
-    this.isPrint = isPrint;
-    WatermarkUtils.setZoom(zoom);
-  }
-
-  private getRandomPlace(obj: Object) {
-    const values = Object.values(obj);
-    const randomIndex = Math.floor(Math.random() * values.length);
-    return values[randomIndex];
-  }
-  /**
-   * 合并默认配置
-   */
-  private mergeDefaultConfig(
-    config: WatermarkConfig | Array<WatermarkConfig>
-  ): WatermarkConfig | Array<WatermarkConfig> {
-    const defaultConfig: WatermarkConfig = {
-      type: "text", // text | image
-      tilling: true, // true 平铺 | false 单个
-      value: "默认水印", // 水印文本
-      font: "bold 20px Serif", // 字体
-      fillStyle: "rgba(192,192,192,0.6)", // 字色
-      rotate: 0, // 旋转角度
-      offset: [0, 0], // 偏移量 mm
-      horizontal: 0, // 横向间距 mm tilling为true时生效
-      vertical: 0, // 纵向间距 mm tilling为true时生效
-      place: "middleCenter", // 单个水印位置
-      image: {
-        // 图片水印配置
-        type: "png", // 图片类型
-        data: "", // 图片base64数据
-        size: [50, 50], // 图片大小 mm
-        opacity: 100, // 不透明度
-      },
-    };
-    if (Array.isArray(config)) {
-      return config.map((cfg) => ({ ...defaultConfig, ...cfg }));
-    }
-    return { ...defaultConfig, ...config };
-  }
-
-  /**
-   * 初始化并渲染水印
-   */
-  async init(): Promise<void> {
-    // 1. 根据id获取元素
-    this.element = document.getElementById(this.elementId);
-    if (!this.element) {
-      console.error(`元素 #${this.elementId} 不存在`);
-      return;
-    }
-
-    // 2. 区分元素类型（图片或其他）
-    this.isImageElement = WatermarkUtils.isImageElement(this.element);
-
-    if (this.isImageElement) {
-      await this.renderImageWatermark();
-      return;
-    }
-    // 4. 根据tilling区分水印类型并渲染
-    if (Array.isArray(this.config)) {
-      for (const cfg of this.config) {
-        this.createSvgContainer(cfg); // 3. 创建SVG容器
-        if (cfg.tilling) {
-          await this.renderTillingWatermark(cfg);
-        } else {
-          await this.renderSingleWatermark(cfg);
-        }
-      }
-    } else {
-      // 3. 创建SVG容器
-      this.createSvgContainer(this.config);
-      if (this.config.tilling) {
-        // 全图平铺水印
-        await this.renderTillingWatermark(this.config);
-      } else {
-        // 单个水印
-        await this.renderSingleWatermark(this.config);
-      }
-    }
-  }
-
-  private waterListener(_el: HTMLElement): void {
-    if (!_el) return;
-    this.observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting) {
-          // 在可视区内时，重新初始化水印
-          _el.innerHTML = "";
-          // this.initWatermarkSingle();
-        }
-      },
-      { threshold: 0.2 }
-    );
-    this.observer.observe(_el);
-  }
-
-  /**
-   * 创建SVG容器
-   */
-  private createSvgContainer(_config: WatermarkConfig): void {
-    if (!this.element) return;
-
-    const wmId = Math.random().toString(36).substring(2);
-    const svgContainer = WatermarkUtils.createSvgElement<SVGSVGElement>(
-      "svg",
-      `watermark-${wmId}`
-    );
-
-    WatermarkUtils.setAttr(svgContainer, "width", "100%");
-    WatermarkUtils.setAttr(svgContainer, "height", "100%");
-    svgContainer.style.cssText =
-      "position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;user-select:none;z-index:999;";
-
-    // 设置viewBox
-    const width = this.element.clientWidth || this.element.offsetWidth;
-    const height = this.element.clientHeight || this.element.offsetHeight;
-    WatermarkUtils.setAttr(svgContainer, "viewBox", `0 0 ${width} ${height}`);
-
-    // 为目标元素设置相对定位
-    if (this.isImageElement) {
-      // 图片元素需要包装
-      this.wrapImageElement();
-    } else {
-      // this.element.style.position = "relative";
-      // this.element.style.overflow = "hidden";
-      this.element.style.cssText += "position:relative;overflow:hidden;";
-      _config && (_config.svgContainer = svgContainer);
-      this.element.appendChild(svgContainer);
-    }
-  }
-
-  /**
-   * 包装图片元素（为图片创建一个容器）
-   */
-  private wrapImageElement(): void {
-    if (!this.element) return;
-
-    const parent = this.element.parentElement;
-    if (!parent) return;
-
-    // 创建包装容器
-    const wrapper = document.createElement("div");
-    wrapper.style.cssText = `
-      position: relative;
-      display: inline-block;
-      width: ${this.element.offsetWidth}px;
-      height: ${this.element.offsetHeight}px;
-      overflow: hidden;
-    `;
-
-    // 将图片移入容器
-    parent.insertBefore(wrapper, this.element);
-    wrapper.appendChild(this.element);
-    // wrapper.appendChild(this.svgContainer);
-
-    // // 更新viewBox
-    // WatermarkUtils.setAttr(
-    //   this.svgContainer,
-    //   "viewBox",
-    //   `0 0 ${this.element.offsetWidth} ${this.element.offsetHeight}`
-    // );
-  }
-
-  /**
-   * 渲染平铺水印（全图水印）
-   */
-  private async renderTillingWatermark(
-    _config: WatermarkConfig
-  ): Promise<void> {
-    if (!_config.svgContainer) return;
-    const gEle = WatermarkUtils.createSvgElement<SVGGElement>("g");
-    _config.svgContainer.appendChild(gEle);
-    // svgEle.style.cssText =
-    // "position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;overflow:hidden;user-select:none;";
-    // 创建pattern元素
-    const patternId = `pattern-${Math.random().toString(36).substring(2)}`;
-    const patternEle =
-      WatermarkUtils.createSvgElement<SVGPatternElement>("pattern");
-    WatermarkUtils.setAttr(patternEle, "id", `${patternId}`);
-    WatermarkUtils.setAttr(patternEle, "patternUnits", "userSpaceOnUse");
-    WatermarkUtils.setAttr(
-      patternEle,
-      "patternTransform",
-      `rotate(${_config?.rotate || 0})`
-    );
-    // 创建填充矩形
-    const rectEle = WatermarkUtils.createSvgElement<SVGRectElement>("rect");
-    WatermarkUtils.setAttr(rectEle, "fill", `url(#${patternId})`); // rect的填充为水印需要平铺元素的id（必须）
-    WatermarkUtils.setAttr(rectEle, "x", 0);
-    WatermarkUtils.setAttr(rectEle, "y", 0);
-    WatermarkUtils.setAttr(rectEle, "width", "100%");
-    WatermarkUtils.setAttr(rectEle, "height", "100%");
-    rectEle.style.pointerEvents = "none";
-
-    if (_config?.type === "image") {
-      await this.createTillingImageWatermark(patternEle, _config);
-    } else {
-      this.createTillingTextWatermark(patternEle, _config);
-    }
-
-    gEle.appendChild(patternEle);
-    gEle.appendChild(rectEle);
-    _config.svgContainer.appendChild(gEle);
-  }
-
-  /**
-   * 创建平铺图片水印
-   */
-  private async createTillingImageWatermark(
-    patternEle: SVGPatternElement,
-    _config: WatermarkConfig
-  ): Promise<void> {
-    const imgConfig = _config.image!;
-    const horizontal = _config.horizontal || 50;
-    const vertical = _config.vertical || 100;
-    // 模拟图片URL（实际使用时替换为真实数据）
-    const imgUrl = imgConfig.data
-      ? `data:image/${imgConfig.type || "png"};base64,${imgConfig.data}`
-      : "https://cdn.jsdelivr.net/gh/zhangpanfei/static@demo/img/test.jpg";
-
-    const imageWidth = WatermarkUtils.mm2px(imgConfig.size?.[0] || 100);
-    const imageHeight = WatermarkUtils.mm2px(imgConfig.size?.[1] || 50);
-
-    const patternWidth = imageWidth + horizontal;
-    const patternHeight = imageHeight + vertical;
-
-    WatermarkUtils.setAttr(patternEle, "width", patternWidth);
-    WatermarkUtils.setAttr(patternEle, "height", patternHeight);
-
-    const imageEle = WatermarkUtils.createSvgElement<SVGImageElement>("image");
-    imageEle.setAttributeNS(
-      "http://www.w3.org/1999/xlink",
-      "xlink:href",
-      imgUrl
-    );
-    // WatermarkUtils.setAttr(imageEle, "width", imageWidth);
-    // WatermarkUtils.setAttr(imageEle, "height", imageHeight);
-    imageEle.style.opacity = String((imgConfig.opacity ?? 100) / 100);
-
-    try {
-      const { width, height } = await WatermarkUtils.loadImage(imgUrl);
-      WatermarkUtils.setAttr(
-        imageEle,
-        "transform",
-        `scale(${imageWidth / width},${imageHeight / height})`
-      );
-    } catch (e) {
-      console.error("图片加载失败", e);
-    }
-
-    patternEle.appendChild(imageEle);
-  }
-
-  /**
-   * 创建平铺文字水印
-   */
-  private createTillingTextWatermark(
-    patternEle: SVGPatternElement,
-    _config: WatermarkConfig
-  ): void {
-    const text = _config.value || "默认水印";
-    const font = _config.font || "bold 20px Serif";
-    const fillStyle = _config.fillStyle || "rgba(192,192,192,0.6)";
-    const horizontal = WatermarkUtils.mm2px(_config.horizontal || 0);
-    const vertical = WatermarkUtils.mm2px(_config.vertical || 0);
-
-    const fontSize = WatermarkUtils.getFontSize(font);
-    const metrics = WatermarkUtils.getTextMetrics(text, font);
-
-    const patternWidth = metrics.width + horizontal; // 平铺宽度计算为字体大小加一之后乘以最长字符串的长度再加上横向间距
-    const patternHeight = metrics.height + vertical; // 平铺的高度计算为字体大小加一之后乘以行数再加上纵向间距
-    WatermarkUtils.setAttr(patternEle, "width", patternWidth);
-    WatermarkUtils.setAttr(patternEle, "height", patternHeight);
-
-    const textEle = WatermarkUtils.createSvgElement<SVGTextElement>("text");
-
-    for (let i = 0; i < metrics.lines.length; i++) {
-      const tspan = WatermarkUtils.createSvgElement<SVGTSpanElement>("tspan");
-      WatermarkUtils.setAttr(tspan, "x", 0);
-      WatermarkUtils.setAttr(tspan, "y", fontSize * (i + 1));
-      tspan.textContent = metrics.lines[i];
-      textEle.appendChild(tspan);
-    }
-    textEle.style.cssText = `font:${font};fill:${fillStyle};text-anchor:start;font-size:${fontSize}px;letter-spacing:${
-      fontSize / 10
-    }pt`;
-
-    patternEle.appendChild(textEle);
-  }
-
-  /**
-   * 渲染单个水印
-   */
-  private async renderSingleWatermark(_config: WatermarkConfig): Promise<void> {
-    if (!_config.svgContainer || !this.element) return;
-
-    const wmPatternId = Math.random().toString(36).substring(2);
-    const gEle = WatermarkUtils.createSvgElement<SVGGElement>(
-      "g",
-      `watermarkSingleG${wmPatternId}`
-    );
-    _config.svgContainer.appendChild(gEle);
-
-    if (_config.type === "image") {
-      await this.createSingleImageWatermark(gEle, _config);
-    } else {
-      this.createSingleTextWatermark(gEle, _config);
-    }
-  }
-
-  /**
-   * 创建单个图片水印
-   */
-  private async createSingleImageWatermark(
-    gEle: SVGGElement,
-    _config: WatermarkConfig
-  ): Promise<void> {
-    if (!this.element || !_config.svgContainer) return;
-    const imgConfig = _config.image!;
-    const imgUrl = imgConfig.data
-      ? `data:image/${imgConfig.type || "png"};base64,${imgConfig.data}`
-      : "https://cdn.jsdelivr.net/gh/zhangpanfei/static@demo/img/test.jpg";
-
-    const imageWidth = WatermarkUtils.mm2px(imgConfig.size?.[0] || 100);
-    const imageHeight = WatermarkUtils.mm2px(imgConfig.size?.[1] || 50);
-
-    const imageEle = WatermarkUtils.createSvgElement<SVGImageElement>("image");
-    imageEle.setAttributeNS(
-      "http://www.w3.org/1999/xlink",
-      "xlink:href",
-      imgUrl
-    );
-    imageEle.style.opacity = String((imgConfig.opacity ?? 100) / 100);
-    let _scale = "";
-    const { width, height } = await WatermarkUtils.loadImage(imgUrl);
-    _scale = imageWidth / width + "," + imageHeight / height;
-    WatermarkUtils.setAttr(
-      imageEle,
-      "transform",
-      "scale(" + imageWidth / width + "," + imageHeight / height + ")"
-    );
-    gEle.appendChild(imageEle);
-    // 计算位置
-    this.calculateImagePosition(_config, imageEle, gEle, _scale);
-  }
-
-  /**
-   * 单个图片计算位置 始终沿着九宫格不超出范围定位和旋转
-   */
-  private calculateImagePosition(
-    _config: WatermarkConfig,
-    imageEle: SVGImageElement,
-    gEle: SVGGElement,
-    _scale: string
-  ): void {
-    if (!this.element || !_config.svgContainer) return;
-    // 计算位置
-    const offset = _config.offset || [0, 0];
-    const _rotate = _config.rotate ?? 0;
-    const place = _config.place || this.getRandomPlace(PlaceMap);
-    const t = (gEle as any).getBBox(); // 容器
-    if (t.width === 0 && t.height === 0 && t.x === 0 && t.y === 0) {
-      // 监听不在可视区内的元素
-      // this.waterListener();
-    } else {
-      // 若已加载	则取消监听
-      this.observer?.disconnect();
-    }
-    const regc = WatermarkUtils.getStart(t.width, t.height, +_rotate);
-    const bound = (
-      _config.svgContainer.getAttribute("viewBox")?.split(" ") ?? [0, 0, 0, 0]
-    ).map(Number);
-    // x y 偏移量
-    const x = WatermarkUtils.mm2px(offset[0], this.isPrint),
-      y = WatermarkUtils.mm2px(offset[1], this.isPrint);
-    let textX = 0,
-      textY = 0,
-      textTransform = "";
-    switch (place) {
-      case PlaceMap.TL:
-        // 始终沿着左侧中心点顺时针旋转
-        textX = x + regc[0];
-        textY = y + regc[1];
-        textTransform = `rotate(${_config.rotate} ${x + regc[2] / 2} ${
-          y + regc[3] / 2
-        }) translate(${textX} ${textY}) scale(${_scale})`;
-        break;
-      case PlaceMap.TC:
-        // 始终沿着中心点Y轴旋转
-        textX = bound[2] / 2 - t.width / 2 + x;
-        textY = y + regc[3] / 2 - t.height / 2;
-        textTransform = `rotate(${_config.rotate} ${textX + t.width / 2} ${
-          regc[3] / 2 + y
-        }) translate(${textX} ${textY}) scale(${_scale})`;
-        break;
-      case PlaceMap.TR:
-        // 始终沿着右侧中心点逆时针旋转
-        textX = bound[2] + x - regc[2] + regc[0];
-        textY = y + regc[1];
-        textTransform = `rotate(${_config.rotate} ${
-          bound[2] + x - regc[2] / 2
-        } ${regc[3] / 2 + y}) translate(${textX} ${textY}) scale(${_scale})`;
-        break;
-      case PlaceMap.ML:
-        // 始终沿着左侧X轴变动
-        textX = x + regc[0];
-        textY = bound[3] / 2 + y - t.height / 2;
-        textTransform = `rotate(${_config.rotate} ${x + regc[2] / 2} ${
-          bound[3] / 2 + y
-        }) translate(${textX} ${textY}) scale(${_scale})`;
-        break;
-      case PlaceMap.MC:
-        // 始终沿着中心点旋转
-        const xt = bound[2] / 2 + x;
-        const yt = bound[3] / 2 + y;
-        textX = xt - t.width / 2;
-        textY = yt - t.height / 2;
-        textTransform = `rotate(${_config.rotate} ${xt} ${yt}) translate(${textX} ${textY}) scale(${_scale})`;
-        break;
-      case PlaceMap.MR:
-        // 始终沿着右侧x轴变动
-        textX = bound[2] + x - regc[2] + regc[0];
-        textY = bound[3] / 2 + y - t.height / 2;
-        textTransform = `rotate(${_config.rotate} ${
-          bound[2] + x - regc[2] / 2
-        } ${bound[3] / 2 + y}) translate(${textX} ${textY}) scale(${_scale})`;
-        break;
-      case PlaceMap.BL:
-        // 始终沿着左侧中心点顺时针旋转
-        textX = x + regc[0];
-        textY = bound[3] + y - regc[1] - t.height;
-        textTransform = `rotate(${_config.rotate} ${x + regc[2] / 2} ${
-          bound[3] + y - regc[3] / 2
-        }) translate(${textX} ${textY}) scale(${_scale})`;
-        break;
-      case PlaceMap.BC:
-        // 始终沿着Y轴变动
-        textX = bound[2] / 2 - t.width / 2 + x;
-        textY = bound[3] + y - regc[1] - t.height;
-        textTransform = `rotate(${_config.rotate} ${textX + t.width / 2} ${
-          bound[3] + y - regc[3] / 2
-        }) translate(${textX} ${textY}) scale(${_scale})`;
-        break;
-      case PlaceMap.BR:
-        // 始终沿着右侧中心点逆时针旋转
-        textX = bound[2] + x - regc[2] + regc[0];
-        textY = bound[3] + y - t.height - regc[1];
-        textTransform = `rotate(${_config.rotate} ${
-          bound[2] + x - regc[2] / 2
-        } ${
-          bound[3] + y - regc[3] / 2
-        }) translate(${textX} ${textY}) scale(${_scale})`;
-        break;
-    }
-    imageEle.setAttribute("transform", textTransform);
-  }
-
-  /**
-   * 创建单个文字水印
-   */
-  private createSingleTextWatermark(
-    gEle: SVGGElement,
-    _config: WatermarkConfig
-  ): void {
-    if (!this.element || !_config.svgContainer) return;
-    const config = _config;
-    const text = config.value || "默认水印";
-    const font = config.font || "bold 20px Serif";
-    const fillStyle = config.fillStyle || "rgba(192,192,192,0.6)";
-    const offset = config.offset || [0, 0];
-    const fontSize = WatermarkUtils.getFontSize(font);
-    const metrics = WatermarkUtils.getTextMetrics(text, font);
-    const textEle = WatermarkUtils.createSvgElement<SVGTextElement>("text");
-    WatermarkUtils.setAttr(textEle, "fill", fillStyle);
-    textEle.style.font = font;
-    WatermarkUtils.setAttr(textEle, "letter-spacing", `${fontSize / 10}pt`);
-    gEle.appendChild(textEle);
-
-    // 初始位置
-    const x = WatermarkUtils.mm2px(offset[0]),
-      y = WatermarkUtils.mm2px(offset[1]);
-    for (let i = 0; i < metrics.lines.length; i++) {
-      const tspan = WatermarkUtils.createSvgElement<SVGTSpanElement>("tspan");
-      WatermarkUtils.setAttr(tspan, "x", x);
-      WatermarkUtils.setAttr(tspan, "y", fontSize * (i + 1));
-      WatermarkUtils.setAttr(tspan, "font-size", fontSize);
-      tspan.textContent = metrics.lines[i];
-      textEle.appendChild(tspan);
-    }
-    this.calculateTextPosition(_config, textEle, x, y, fontSize);
-  }
-  /**
-   * 单个文字计算位置
-   */
-  private calculateTextPosition(
-    _config: WatermarkConfig,
-    textEle: SVGTextElement,
-    x: number,
-    y: number,
-    fontSize: number
-  ): void {
-    if (!this.element || !_config.svgContainer) return;
-    const t = textEle.getBBox(); // 容器
-    let place = _config.place;
-    // 如果place为random 则随机获取一个位置
-    if (!place) {
-      place = this.getRandomPlace(PlaceMap);
-    }
-    const rotate = _config.rotate || 0;
-    const child = textEle.children;
-    const bound = (
-      _config.svgContainer.getAttribute("viewBox")?.split(" ") ?? [0, 0, 0, 0]
-    ).map(Number);
-    let _n = 0;
-    for (let i = 0; i < child.length; i++) {
-      const ele = child[i] as SVGTSpanElement;
-      if (i === 0) {
-        _n = ele.getBBox().y;
-      }
-      const regc = WatermarkUtils.getStart(t.width, t.height, rotate);
-      let textX = x + regc[0],
-        textY = 0,
-        textTransform = "",
-        eleX = textX,
-        eleY = regc[1] + y + fontSize * (i + 1);
-      switch (place) {
-        case PlaceMap.TL:
-          // 始终沿着左侧中心点顺时针旋转
-          // textX = x + regc[0];
-          textY = y + regc[1];
-          textTransform = `rotate(${rotate} ${regc[2] / 2 + x} ${
-            regc[3] / 2 + y
-          })`;
-          // eleX = x + regc[0];
-          // eleY = regc[1] + y + fontSize * (i + 1);
-          break;
-        case PlaceMap.TC:
-          // 始终沿着中心点Y轴旋转
-          const xt = bound[2] / 2 - t.width / 2;
-          textX = xt + x;
-          textY = y + regc[3] / 2 - t.height / 2;
-          textTransform = `rotate(${rotate} ${xt + t.width / 2 + x} ${
-            regc[3] / 2 + y
-          })`;
-          // eleX = xt + x;
-          eleX = textX;
-          // eleY = regc[1] + y + fontSize * (i + 1);
-          break;
-        case PlaceMap.TR:
-          // 始终沿着右侧中心点逆时针旋转
-          textX = bound[2] - regc[2] + regc[0] + x;
-          textY = y + regc[1];
-          textTransform = `rotate(${rotate} ${bound[2] - regc[2] / 2 + x} ${
-            regc[3] / 2 + y
-          })`;
-          // eleX = bound[2] - regc[2] + regc[0] + x;
-          eleX = textX;
-          // eleY = regc[1] + y + fontSize * (i + 1);
-          break;
-        case PlaceMap.ML:
-          // 始终沿着左侧X轴变动
-          // textX = x + regc[0];
-          textY = bound[3] / 2 + y;
-          textTransform = `rotate(${rotate} ${x + regc[2] / 2} ${textY})`;
-          // eleX = x + regc[0];
-          eleY = textY - t.height / 2 + fontSize * (i + 1);
-          break;
-        case PlaceMap.MC:
-          // 始终沿着中心点旋转
-          const yt = bound[3] / 2 + y;
-          textX = bound[2] / 2 + x;
-          textY = yt - t.height;
-          textTransform = `rotate(${rotate} ${textX} ${yt})`;
-          eleX = textX - t.width / 2;
-          eleY = yt - t.height / 2 + fontSize * (i + 1);
-          break;
-        case PlaceMap.MR:
-          // 始终沿着右侧x轴变动
-          textX = bound[2] + x - regc[2] + regc[0];
-          textY = bound[3] / 2 + y;
-          textTransform = `rotate(${rotate} ${
-            bound[2] + x - regc[2] / 2
-          } ${textY})`;
-          eleX = bound[2] + x - regc[2] + regc[0];
-          eleY = textY - t.height / 2 + fontSize * (i + 1);
-          break;
-        case PlaceMap.BL:
-          // 始终沿着左侧中心点顺时针旋转
-          // textX = x + regc[0];
-          textY = bound[3] + y - regc[1];
-          textTransform = `rotate(${rotate} ${regc[2] / 2 + x} ${
-            bound[3] + y - regc[3] / 2
-          })`;
-          eleX = regc[0] + x;
-          eleY = bound[3] + y - regc[1] - t.height + fontSize * (i + 1);
-          break;
-        case PlaceMap.BC:
-          // 始终沿着Y轴变动
-          textX = bound[2] / 2 - t.width / 2 + x;
-          textY = bound[3] + y - regc[1];
-          textTransform = `rotate(${rotate} ${textX + t.width / 2} ${
-            bound[3] + y - regc[3] / 2
-          })`;
-          eleX = bound[2] / 2 - t.width / 2 + x;
-          eleY = bound[3] + y - regc[1] - t.height + fontSize * (i + 1);
-          break;
-        case PlaceMap.BR:
-          // 始终沿着右侧中心点逆时针旋转
-          textX = bound[2] + x - regc[2] + regc[0];
-          textY = bound[3] + y - regc[1];
-          textTransform = `rotate(${rotate} ${bound[2] + x - regc[2] / 2} ${
-            bound[3] + y - regc[3] / 2
-          })`;
-          eleX = bound[2] + x - regc[2] + regc[0];
-          eleY = bound[3] + y - t.height - regc[1] + fontSize * (i + 1);
-          break;
-        default:
-          break;
-      }
-      WatermarkUtils.setAttr(textEle, "x", textX);
-      WatermarkUtils.setAttr(textEle, "y", textY);
-      WatermarkUtils.setAttr(textEle, "transform", textTransform);
-      WatermarkUtils.setAttr(ele, "x", eleX);
-      WatermarkUtils.setAttr(ele, "y", eleY - _n);
-    }
-  }
-
-  // 以下为以图片为基底的水印
-  private async renderImageWatermark(): Promise<void> {
-    const _image_element = this.element as HTMLImageElement;
-    if (!_image_element) return;
-    _image_element.onload = () => {
-      if (_image_element.getAttribute("watermark") != "true") {
-        this.imageWatermark(this.config);
-      }
-    };
-  }
-
-  private async imageWatermark(
-    _config: Array<WatermarkConfig> | WatermarkConfig
-  ): Promise<void> {
-    if (!this.element) return;
-    const image = this.element as HTMLImageElement;
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    let size = { width: 0, height: 0 };
-    if (image.naturalWidth && image.naturalHeight) {
-      size = { width: image.naturalWidth, height: image.naturalHeight };
-    } else {
-      size = await WatermarkUtils.getImageSizeByUrl(image.src);
-    }
-    const iw = size.width,
-      ih = size.height;
-    canvas.width = iw;
-    canvas.height = ih;
-
-    // 绘制底图
-    ctx.drawImage(image, 0, 0);
-    const arr = Array.isArray(_config) ? _config : [_config];
-    console.log(3, arr);
-
-    for (let index = 0; index < arr.length; index++) {
-      const setting = arr[index];
-      if (
-        !setting ||
-        (setting.type === "text" && !setting.value) ||
-        (setting.type === "image" && !setting?.image?.data)
-      ) {
-        continue;
-      }
-      if (iw == 0 || ih == 0 || setting == null || !ctx) {
-        continue;
-      }
-      // 配置
-      const bound = [0, 0, iw, ih]; // 容器
-      const offset = setting.offset || [0, 0];
-      const rotate = setting.rotate || 0; //旋转角度
-      const _type = setting.type; // image | text
-      const _tilling = setting.tilling; // false 单个 | true 平铺
-      const place = setting.place || this.getRandomPlace(PlaceMap);
-      const _vertical = setting.vertical || 0;
-      const _horizontal = setting.horizontal || 0;
-      const font = setting.font || "16pt SimSun";
-      if (_type === "image") {
-        let nOpacity = setting.image?.opacity || 100;
-        let imageWidth = 100;
-        let imageHeight = 100;
-        if (setting.image && setting.image.size) {
-          imageWidth = WatermarkUtils.mm2pxDpi(setting.image.size[0], 96);
-          imageHeight = WatermarkUtils.mm2pxDpi(setting.image.size[1], 96);
-        }
-
-        await WatermarkUtils.imageOnload(() => {
-          return new Promise((resolve) => {
-            const _img = new Image();
-            _img.crossOrigin = "anonymous";
-            _img.src = "data:image/png;base64," + setting.image?.data;
-            // _img.src = "https://tse1-mm.cn.bing.net/th/id/OIP-C.o8onZxvvNC118n8dh0Q3ZQHaHa?rs=1&pid=ImgDetMain"; // 模拟图片
-            _img.width = imageWidth;
-            _img.height = imageHeight;
-            const vertical = WatermarkUtils.mm2pxDpi(_vertical, 96);
-            const horizontal = WatermarkUtils.mm2pxDpi(_horizontal, 96);
-            _img.onload = () => {
-              if (!_tilling) {
-                ctx.save();
-                const regc = WatermarkUtils.getStart(
-                  imageWidth,
-                  imageHeight,
-                  rotate
-                );
-                const _objXY = this.translateXY(
-                  place,
-                  offset,
-                  imageWidth,
-                  bound,
-                  regc
-                );
-                // 原点修改以及旋转
-                ctx.translate(_objXY.translateX, _objXY.translateY);
-                ctx.rotate((Math.PI / 180) * rotate);
-                ctx.globalAlpha = nOpacity / 100; // 透明度设置
-                // 绘制图片
-                ctx.drawImage(
-                  _img,
-                  -imageWidth / 2,
-                  -imageHeight / 2,
-                  imageWidth,
-                  imageHeight
-                );
-                ctx.restore();
-              } else {
-                ctx.save();
-                //平铺比例
-                const scale = 3;
-                //缩小后图像宽度
-                const n1 = _img.width;
-                //缩小后图像高度
-                const n2 = _img.height;
-                //平铺横向个数
-                const n3 = (iw / (n1 + horizontal)) * scale;
-                //平铺纵向个数
-                const n4 = (ih / (n2 + vertical)) * scale;
-                ctx.translate(iw / 2, ih / 2);
-                ctx.rotate((rotate * Math.PI) / 180);
-                ctx.translate(-iw / 2, -ih / 2);
-                for (let i = -15; i < n3; i++) {
-                  for (let j = -15; j < n4; j++) {
-                    ctx.globalAlpha = (100 - nOpacity) / 100; // 透明度设置
-                    ctx.drawImage(
-                      _img,
-                      i * (n1 + horizontal),
-                      j * (n2 + vertical),
-                      n1,
-                      n2
-                    );
-                  }
-                }
-                ctx.restore();
-              }
-              resolve(true);
-            };
-          });
-        });
-      } else {
-        const v = setting.value || ""; //水印文本
-        const vs = v.split("\n");
-        const vertical = WatermarkUtils.mm2pxDpi(_vertical, 96); //纵向间距
-        const horizontal = WatermarkUtils.mm2pxDpi(_horizontal, 96); //横向间距
-        const fontSize = parseInt(font.replace(/[^\d]/g, " "));
-        const fs = (fontSize * 96) / 72;
-        ctx.fillStyle = setting.fillStyle || "rgba(192,192,192,0.6)"; //文本颜色
-        ctx.font = font;
-        const width_Num = [];
-        for (let i = 0; i < vs.length; i++) {
-          width_Num.push(ctx.measureText(vs[i]).width);
-        }
-        const maxWidth = WatermarkUtils.getMaxOfArray(width_Num); // 以最大文字的宽度为准
-        const fontH = parseInt(fs * vs.length + "");
-        const regc = WatermarkUtils.getStart(maxWidth, fontH, rotate); // 文本绘制区域
-
-        const moveX = 0;
-
-        if (!_tilling) {
-          ctx.save();
-          ctx.textAlign = "center"; // 文本对齐方式
-          ctx.textBaseline = "middle"; // 设置文本的垂直对齐方式
-          const _objXY = this.translateXY(place, offset, maxWidth, bound, regc);
-          ctx.translate(_objXY.translateX, _objXY.translateY);
-          ctx.rotate((Math.PI / 180) * rotate);
-          for (let vi = 0; vi < vs.length; vi++) {
-            ctx.fillText(vs[vi], moveX, -fontH / 2 + fs / 2 + fs * vi);
-          }
-          ctx.restore();
-        } else {
-          ctx.save();
-          ctx.translate(iw / 2, ih / 2);
-          ctx.rotate((Math.PI / 180) * rotate);
-          for (let i = -iw; i < iw; ) {
-            for (let j = -ih; j < ih; ) {
-              for (let vi = 0; vi < vs.length; vi++) {
-                ctx.fillText(vs[vi], i, j + fs * vi);
-              }
-              j = j + fontH + (vertical ? vertical : 0);
-            }
-            i = i + maxWidth + (horizontal ? horizontal : 0);
-          }
-          ctx.restore();
-        }
-      }
-    }
-    image.src = canvas.toDataURL("image/png");
-    image.setAttribute("watermark", "true");
-  }
-
-  private translateXY(
-    place: PlaceType,
-    offset: number[],
-    elWidth: number,
-    boundRect: number[],
-    elRect: number[]
-  ) {
-    let translateX = 0;
-    let translateY = 0;
-    const bound = boundRect;
-    const regc = elRect;
-    const offsetX = offset[0];
-    const offsetY = offset[1];
-    const tw = elWidth;
-    switch (place) {
-      case "topLeft":
-      case "middleLeft":
-      case "bottomLeft":
-        translateX = offsetX + regc[2] / 2;
-        if (place === "topLeft") {
-          translateY = offsetY + regc[3] / 2;
-        } else if (place === "middleLeft") {
-          translateY = offsetY + bound[3] / 2;
-        } else if (place === "bottomLeft") {
-          translateY = offsetY + bound[3] - regc[3] / 2;
-        }
-        break;
-      case "topCenter":
-      case "middleCenter":
-      case "bottomCenter":
-        translateX = offsetX + bound[2] / 2;
-        if (place === "topCenter") {
-          translateY = offsetY + regc[3] / 2;
-        } else if (place === "middleCenter") {
-          translateY = offsetY + bound[3] / 2;
-        } else if (place === "bottomCenter") {
-          translateY = offsetY + bound[3] - regc[3] / 2;
-        }
-        break;
-      case "topRight":
-      case "middleRight":
-      case "bottomRight":
-        translateX = offsetX + bound[2] - tw / 2 - regc[0];
-        if (place === "topRight") {
-          translateY = offsetY + regc[3] / 2;
-        } else if (place === "middleRight") {
-          translateY = offsetY + bound[3] / 2;
-        } else if (place === "bottomRight") {
-          translateY = offsetY + bound[3] - regc[3] / 2;
-        }
-        break;
-    }
-    return {
-      translateX: translateX,
-      translateY: translateY,
-    };
-  }
-
-  /**
-   * 移除水印
-   */
-  destroy(): void {
-    if (this.element) {
-      this.element.remove();
-      this.element = null;
-    }
-  }
-}