customer-chat-sdk 1.0.20 → 1.0.22

package/README.md

@@ -11,6 +11,7 @@
 - **设备指纹**: 自动获取设备唯一标识
 - **iframe隔离**: 完全隔离的聊天界面，避免样式冲突
 - **通知系统**: 红点徽章、数字提醒功能
+- **页面截图**: 支持自动截图和上传功能，可配置截图引擎和压缩选项
 - **跨平台支持**: 支持UMD、ESM、CJS多种模块格式
 
 ## 📦 安装
@@ -96,12 +97,25 @@ CustomerSDK.clearNotification(); // 清除通知
 ### 高级配置
 
 ```javascript
-// 完整的配置选项
+// 高级配置
 await CustomerSDK.init({
   agent: 'your_agent_id',
   token: 'your_jwt_token',
   iframeUrl: 'https://chat.example.com',
-  debug: true
+  debug: true,
+  // 截图配置（可选）
+  screenshot: {
+    interval: 5000,           // 截图间隔（毫秒），默认5000
+    quality: 0.4,            // 图片质量（0-1），默认0.4
+    maxWidth: 1600,           // 最大宽度，默认1600
+    maxHeight: 900,           // 最大高度，默认900
+    outputFormat: 'webp',      // 输出格式：'webp' | 'jpeg' | 'png'，默认webp
+    engine: 'html2canvas',    // 截图引擎（仅支持html2canvas）
+    compress: false,          // 是否启用前端压缩，默认false
+    enableCORS: true,         // 是否启用CORS处理，默认true
+    corsMode: 'canvas-proxy', // CORS处理模式，默认canvas-proxy
+    silentMode: false         // 静默模式，减少控制台输出，默认false
+  }
 }, {
   // iframe选项（可选）
   width: 400,
@@ -116,6 +130,16 @@ await CustomerSDK.init({
     y: 80       // 距离顶部的距离（像素或CSS值，如'80px'、'10%'）
   }
 });
+
+// 设置自定义截图目标元素
+CustomerSDK.setScreenshotTarget(document.getElementById('my-container'));
+
+// 手动触发截图
+await CustomerSDK.captureScreenshot();
+
+// 获取截图状态
+const state = CustomerSDK.getScreenshotState();
+console.log('截图状态:', state);
 ```
 
 ## 📖 API 文档
@@ -138,6 +162,24 @@ interface SDKConfig {
   token: string;           // 认证令牌
   iframeUrl: string;       // iframe聊天页面URL (必需)
   debug?: boolean;         // 调试模式
+  screenshot?: ScreenshotOptions;  // 截图配置（可选）
+}
+
+interface ScreenshotOptions {
+  interval?: number;       // 截图间隔（毫秒），默认5000
+  quality?: number;        // 图片质量（0-1），默认0.4
+  scale?: number;          // 缩放比例，默认1
+  maxHistory?: number;     // 最大历史记录数，默认10
+  compress?: boolean;      // 是否压缩图片，默认false
+  maxWidth?: number;       // 最大宽度，默认1600
+  maxHeight?: number;      // 最大高度，默认900
+  outputFormat?: 'webp' | 'jpeg' | 'png';  // 输出格式，默认webp
+  enableCORS?: boolean;     // 是否启用CORS处理，默认true
+  proxyUrl?: string;       // 代理服务器URL，用于处理CORS问题
+  engine?: 'html2canvas';  // 截图引擎（仅支持html2canvas，此选项已废弃，保留仅为兼容性）
+  corsMode?: 'simple' | 'smart' | 'proxy' | 'blob' | 'canvas-proxy' | 'ignore' | 'test-first';  // CORS处理模式，默认canvas-proxy
+  silentMode?: boolean;     // 静默模式，减少控制台输出，默认false
+  maxRetries?: number;      // 最大重试次数，默认2
 }
 ```
 
@@ -198,6 +240,34 @@ CustomerSDK.setIconCoordinates({ x: 50, y: 100 });
 CustomerSDK.setIconCoordinates({ x: '20px', y: '10%' });
 ```
 
+#### `CustomerSDK.setScreenshotTarget(element)`
+
+设置截图目标元素。默认截图目标为 `document.body`。
+
+**参数：**
+- `element` (HTMLElement): 要截图的DOM元素
+
+#### `CustomerSDK.captureScreenshot()`
+
+手动触发一次截图。
+
+**返回：** `Promise<boolean>` - 是否截图成功
+
+#### `CustomerSDK.getScreenshotState()`
+
+获取截图功能的状态信息。
+
+**返回：** 状态对象，包含：
+- `isRunning`: 是否正在运行
+- `screenshotCount`: 截图次数
+- `lastScreenshotTime`: 最后截图时间
+- `error`: 错误信息
+- `isEnabled`: 是否启用
+- `isUploading`: 是否正在上传
+- `uploadError`: 上传错误
+- `uploadProgress`: 上传进度
+- `currentUploadConfig`: 当前上传配置
+
 #### `CustomerSDK.isChatOpen()`
 
 检查聊天窗口是否打开。

package/dist/core/ScreenshotManager.d.ts

@@ -0,0 +1,167 @@
+/**
+ * 截图配置选项
+ */
+export interface ScreenshotOptions {
+    interval?: number;
+    quality?: number;
+    scale?: number;
+    maxHistory?: number;
+    compress?: boolean;
+    maxWidth?: number;
+    maxHeight?: number;
+    outputFormat?: 'webp' | 'jpeg' | 'png';
+    enableCORS?: boolean;
+    proxyUrl?: string;
+    engine?: 'html2canvas';
+    corsMode?: 'simple' | 'smart' | 'proxy' | 'blob' | 'canvas-proxy' | 'ignore' | 'test-first';
+    silentMode?: boolean;
+    maxRetries?: number;
+}
+/**
+ * 上传配置接口
+ */
+export interface UploadConfig {
+    uploadUrl: string;
+    objectKey: string;
+    bucketName: string;
+    contentType: string;
+    expirationMinutes: number;
+    duration: number;
+}
+/**
+ * 截图管理器
+ * 负责页面截图、压缩和上传功能
+ */
+export declare class ScreenshotManager {
+    private options;
+    private targetElement;
+    private isRunning;
+    private screenshotCount;
+    private screenshotHistory;
+    private lastScreenshotTime;
+    private error;
+    private isEnabled;
+    private isUploading;
+    private uploadError;
+    private uploadProgress;
+    private currentUploadConfig;
+    private worker;
+    private screenshotTimer;
+    private messageHandler;
+    private dynamicInterval;
+    private expirationTimer;
+    private imageProxyCache;
+    private globalErrorHandler;
+    private globalRejectionHandler;
+    constructor(targetElement: HTMLElement | null, options?: ScreenshotOptions);
+    /**
+     * 设置目标元素
+     */
+    setTargetElement(element: HTMLElement | null): void;
+    /**
+     * 设置消息监听
+     */
+    private setupMessageListener;
+    /**
+     * 设置页面可见性监听
+     */
+    private setupVisibilityChangeListener;
+    /**
+     * 处理 iframe postMessage 消息
+     */
+    private handleIframeMessage;
+    /**
+     * 解析上传配置
+     */
+    private parseUploadConfig;
+    /**
+     * 开始轮询截图
+     */
+    startScreenshot(customInterval?: number): void;
+    /**
+     * 停止轮询截图
+     */
+    stopScreenshot(): void;
+    /**
+     * 手动截图一次
+     */
+    captureOnce(): Promise<boolean>;
+    /**
+     * 执行截图
+     */
+    private takeScreenshot;
+    /**
+     * 使用 html2canvas 截图
+     */
+    private takeScreenshotWithHtml2Canvas;
+    /**
+     * 预处理网络图片
+     */
+    private preprocessNetworkImages;
+    /**
+     * 等待图片加载完成
+     */
+    private waitForImagesToLoad;
+    /**
+     * 等待 CSS 和字体加载完成
+     */
+    private waitForStylesAndFonts;
+    /**
+     * 等待字体加载完成
+     */
+    private waitForFonts;
+    /**
+     * 计算压缩后的尺寸
+     */
+    private calculateCompressedSize;
+    /**
+     * 创建 WebWorker
+     */
+    private createWorker;
+    /**
+     * 设置全局错误处理器
+     */
+    private setupGlobalErrorHandlers;
+    /**
+     * 移除全局错误处理器
+     */
+    private removeGlobalErrorHandlers;
+    /**
+     * 上传截图到 S3
+     */
+    private uploadScreenshot;
+    /**
+     * 将 base64 data URL 转换为 Blob
+     */
+    private dataUrlToBlob;
+    /**
+     * 获取最新截图
+     */
+    private getLatestScreenshot;
+    /**
+     * 启用/禁用截图功能
+     */
+    enable(enabled: boolean): void;
+    /**
+     * 清理资源
+     */
+    destroy(): void;
+    /**
+     * 获取状态
+     */
+    getState(): {
+        isRunning: boolean;
+        screenshotCount: number;
+        lastScreenshotTime: number;
+        error: string | null;
+        isEnabled: boolean;
+        isUploading: boolean;
+        uploadError: string | null;
+        uploadProgress: {
+            success: number;
+            failed: number;
+        };
+        currentUploadConfig: UploadConfig | null;
+    };
+}
+//# sourceMappingURL=ScreenshotManager.d.ts.map

package/dist/core/ScreenshotManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenshotManager.d.ts","sourceRoot":"","sources":["../../src/core/ScreenshotManager.ts"],"names":[],"mappings":"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"}