xxm-test-js/dist/lib/Watermark.d.ts

xxm-js通用js工具(utils)库

/**
 * 页面水印类
 *
 * 使用场景：为页面添加水印，用于版权保护、信息安全、防止截图泄密等场景。
 * 适用于后台管理系统、敏感信息页面、文档预览等需要标识用户身份或保护内容的场合。
 *
 * 主要特性：
 * - 自定义水印内容：支持单行或多行文字
 * - 样式配置：可配置字体、颜色、大小、透明度、旋转角度等
 * - 防删除保护：使用 MutationObserver 监听 DOM 变化，防止水印被删除或修改
 * - 高性能：使用 Canvas 生成水印，以 base64 图片作为背景
 * - 响应式：支持窗口大小变化时自动调整
 * - 易于销毁：提供销毁方法，完全清理水印和监听器
 *
 * @example
 * ```typescript
 * // 基本用法
 * const watermark = new Watermark({
 *   content: '机密文档',
 *   fontSize: 16,
 *   opacity: 0.15
 * });
 * watermark.create();
 *
 * // 多行水印
 * const watermark = new Watermark({
 *   content: ['张三', '2024-01-01', '仅供内部使用'],
 *   color: '#000',
 *   rotate: -20
 * });
 * watermark.create();
 *
 * // 销毁水印
 * watermark.destroy();
 * ```
 */
interface WatermarkOptions {
    /**
     * 水印内容，支持字符串或字符串数组（多行）
     */
    content?: string | string[];
    /**
     * 水印容器，默认为 document.body
     */
    container?: HTMLElement;
    /**
     * 水印宽度，默认 200
     */
    width?: number;
    /**
     * 水印高度，默认 150
     */
    height?: number;
    /**
     * 字体大小，默认 16
     */
    fontSize?: number;
    /**
     * 字体样式，默认 'normal'
     */
    fontStyle?: 'normal' | 'italic' | 'oblique';
    /**
     * 字体粗细，默认 'normal'
     */
    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number;
    /**
     * 字体系列，默认 'Microsoft YaHei'
     */
    fontFamily?: string;
    /**
     * 文字颜色，默认 '#000000'
     */
    color?: string;
    /**
     * 透明度，默认 0.15
     */
    opacity?: number;
    /**
     * 旋转角度（度），默认 -20
     */
    rotate?: number;
    /**
     * 层级，默认 9999
     */
    zIndex?: number;
    /**
     * 行间距（仅多行时有效），默认 20
     */
    lineHeight?: number;
    /**
     * 是否启用防删除保护，默认 true
     */
    monitor?: boolean;
    /**
     * 水印层的 id，默认 'watermark-container'
     */
    id?: string;
}
declare class Watermark {
    private options;
    private watermarkElement;
    private observer;
    private resizeObserver;
    private isDestroyed;
    constructor(options?: WatermarkOptions);
    /**
     * 创建水印
     */
    create(): void;
    /**
     * 更新水印配置
     * @param options 新的配置项
     */
    update(options: Partial<WatermarkOptions>): void;
    /**
     * 销毁水印
     */
    destroy(): void;
    /**
     * 创建水印元素
     */
    private createWatermarkElement;
    /**
     * 生成水印图片（base64）
     */
    private generateWatermarkImage;
    /**
     * 移除水印元素
     */
    private removeWatermarkElement;
    /**
     * 启动 DOM 监听（防删除）
     */
    private startMonitor;
    /**
     * 停止 DOM 监听
     */
    private stopMonitor;
    /**
     * 监听容器大小变化
     */
    private observeResize;
    /**
     * 停止监听容器大小变化
     */
    private stopResizeObserver;
    /**
     * 处理窗口大小变化（降级方案）
     */
    private handleResize;
}
export { Watermark, WatermarkOptions };