invisible-watermark-vue/dist/index.d.ts

A TypeScript library for creating and detecting invisible watermarks using Canvas API, with Vue 3 support

import { Directive, Ref } from "vue";

//#region src/types.d.ts
/**
 * 水印配置选项
 */
interface WatermarkOptions {
  /**
   * 水印文本内容
   */
  text: string;
  /**
   * 水印透明度 (0-1)
   * @default 0.005
   */
  opacity?: number;
  /**
   * 字体大小
   * @default 20
   */
  fontSize?: number;
  /**
   * 字体样式
   * @default 'Arial'
   */
  fontFamily?: string;
  /**
   * 旋转角度（度）
   * @default -15
   */
  rotate?: number;
  /**
   * 文本颜色（RGB格式）
   * @default '0, 0, 0'
   */
  color?: string;
  /**
   * 水平间距
   * @default 1
   */
  spacingX?: number;
  /**
   * 垂直间距
   * @default 1.5
   */
  spacingY?: number;
}
//#endregion
//#region src/WatermarkCreator.d.ts
/**
 * 水印创建器类
 * 负责在Canvas上创建和绘制不可见水印
 */
declare class WatermarkCreator {
  private canvas;
  private ctx;
  private container;
  private currentText;
  private currentOptions;
  private readonly defaultOptions;
  constructor();
  /**
   * 初始化Canvas元素
   */
  private initCanvas;
  /**
   * 绘制水印到Canvas
   */
  private drawWatermark;
  /**
   * 应用水印到指定容器
   * @param container - 目标DOM容器
   * @param options - 水印配置选项
   */
  apply(container: HTMLElement, options: WatermarkOptions): void;
  /**
   * 更新水印
   * @param options - 新的水印配置选项
   */
  update(options: Partial<WatermarkOptions>): void;
  /**
   * 清除水印
   */
  clear(): void;
  /**
   * 移除水印Canvas元素
   */
  destroy(): void;
  /**
   * 获取当前水印文本
   */
  getCurrentText(): string;
  /**
   * 获取当前配置
   */
  getCurrentOptions(): Required<WatermarkOptions>;
  /**
   * 监听窗口大小变化并重绘水印
   */
  enableAutoResize(): () => void;
}
//#endregion
//#region src/composables.d.ts
/**
 * Vue3 组合式函数 - 水印创建
 * @param containerRef - 容器元素的ref
 * @param options - 水印配置选项
 * @returns 水印控制方法
 */
declare function useWatermark(containerRef: Ref<HTMLElement | null>, options?: WatermarkOptions): {
  isApplied: Ref<boolean, boolean>;
  currentText: Ref<string, string>;
  apply: (newOptions?: WatermarkOptions) => void;
  update: (newOptions: Partial<WatermarkOptions>) => void;
  clear: () => void;
  destroy: () => void;
};
//#endregion
//#region src/directive.d.ts
/**
 * Vue 3 水印指令
 *
 * @example
 * // 基础用法
 * <div v-watermark="{ text: 'user_12345', opacity: 0.005 }">内容</div>
 *
 * // 使用变量
 * <div v-watermark="watermarkConfig">内容</div>
 *
 * // 简写（仅文本）
 * <div v-watermark="'user_12345'">内容</div>
 */
declare const vWatermark: Directive<HTMLElement, WatermarkOptions | string>;
/**
 * 水印插件
 *
 * @example
 * import { createApp } from 'vue';
 * import { WatermarkPlugin } from 'invisible-watermark-vue';
 *
 * const app = createApp(App);
 * app.use(WatermarkPlugin);
 */
declare const WatermarkPlugin: {
  install(app: any): void;
};
//#endregion
export { WatermarkCreator, type WatermarkOptions, WatermarkPlugin, useWatermark, vWatermark };
//# sourceMappingURL=index.d.ts.map