customer-chat-sdk 1.0.33 → 1.0.35

package/dist/customer-sdk.esm.js

@@ -1,3 +1,5 @@
+import html2canvas from 'html2canvas';
+
 // 直接使用base64字符串，避免打包后路径问题
 const iconImage = 'data:image/png;base64,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';
 class IconManager {
@@ -6503,13 +6505,17 @@ class ScreenshotManager {
         this.visibleElementsCache = new Set();
         // 预连接状态
         this.preconnected = false;
+        // 图片下载队列和并发控制（防止频繁截图时重复下载）
+        this.imageDownloadQueue = new Map(); // URL -> Promise，避免重复下载
+        this.activeDownloads = new Set(); // 正在下载的 URL
+        this.maxConcurrentImageDownloads = 5; // 最大并发下载数（降低，避免内存问题）
         // 全局错误处理器
         this.globalErrorHandler = null;
         this.globalRejectionHandler = null;
         this.targetElement = targetElement;
         this.options = {
             interval: options.interval ?? 5000,
-            quality: options.quality ?? 0.4,
+            quality: options.quality ?? 0.3, // 降低默认质量：0.4 -> 0.3，减少 base64 大小
             scale: options.scale ?? 1,
             maxHistory: options.maxHistory ?? 10,
             compress: options.compress ?? false,
@@ -6533,7 +6539,9 @@ class ScreenshotManager {
             useIntersectionObserver: options.useIntersectionObserver ?? true, // 默认使用 Intersection Observer
             fetchPriority: options.fetchPriority ?? 'high', // 默认高优先级
             maxCacheSize: options.maxCacheSize ?? 50, // 默认最大50MB
-            maxCacheAge: options.maxCacheAge ?? 86400000 // 默认24小时（86400000ms）
+            maxCacheAge: options.maxCacheAge ?? 86400000, // 默认24小时（86400000ms）
+            maxImageSize: options.maxImageSize ?? 5, // 不使用代理时，单个图片最大尺寸（MB），默认5MB
+            skipLargeImages: options.skipLargeImages ?? true // 不使用代理时，是否跳过过大的图片，默认true（跳过）
         };
         this.setupMessageListener();
         this.setupVisibilityChangeListener();
@@ -6894,6 +6902,9 @@ class ScreenshotManager {
             if (selectedEngine === 'snapdom') {
                 dataUrl = await this.takeScreenshotWithSnapdom(this.targetElement);
             }
+            else if (selectedEngine === 'html2canvas') {
+                dataUrl = await this.takeScreenshotWithHtml2Canvas(this.targetElement);
+            }
             else {
                 // 默认使用 modern-screenshot
                 dataUrl = await this.takeScreenshotWithModernScreenshot(this.targetElement);
@@ -7056,8 +7067,173 @@ class ScreenshotManager {
             throw error;
         }
     }
+    /**
+     * 使用 html2canvas 截图
+     *
+     * 优势：
+     * - 处理 SVG 和本地资源更快（不需要复杂的 Worker 通信）
+     * - 兼容性好，支持更多 CSS 特性
+     * - 跨域处理相对简单
+     *
+     * 劣势：
+     * - 在主线程执行，可能阻塞 UI（但处理速度快，影响较小）
+     * - 不支持 Worker 模式
+     *
+     * 适用场景：
+     * - 页面包含大量 SVG 图标
+     * - 本地资源较多
+     * - 需要快速截图
+     */
+    async takeScreenshotWithHtml2Canvas(element) {
+        if (!this.options.silentMode) {
+            console.log('📸 使用 html2canvas 引擎截图...');
+        }
+        try {
+            // 检查元素是否存在和可见
+            const rect = element.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) {
+                throw new Error('元素尺寸为 0，无法截图');
+            }
+            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+            const isLowEndDevice = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;
+            // 计算压缩后的尺寸
+            let elementWidth = element.scrollWidth || element.clientWidth || element.offsetWidth;
+            let elementHeight = element.scrollHeight || element.clientHeight || element.offsetHeight;
+            if (element === document.body || element === document.documentElement) {
+                elementWidth = Math.max(element.scrollWidth, element.offsetWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth, window.innerWidth);
+                elementHeight = Math.max(element.scrollHeight, element.offsetHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight, window.innerHeight);
+            }
+            const { width, height } = this.calculateCompressedSize(elementWidth, elementHeight, this.options.maxWidth, this.options.maxHeight);
+            const finalWidth = width < elementWidth ? width : Math.min(elementWidth, this.options.maxWidth);
+            const finalHeight = height < elementHeight ? height : Math.min(elementHeight, this.options.maxHeight);
+            // html2canvas 质量设置（0-1）
+            const finalQuality = isMobile || isLowEndDevice
+                ? Math.max(this.options.quality * 0.65, 0.2)
+                : this.options.quality;
+            // html2canvas 配置选项
+            const options = {
+                // 基本配置
+                backgroundColor: '#ffffff',
+                scale: this.options.scale !== 1 ? (isMobile ? 0.7 : this.options.scale) : (isMobile ? 0.7 : 1),
+                useCORS: this.options.enableCORS,
+                allowTaint: !this.options.enableCORS, // 如果启用 CORS，不允许 taint
+                logging: !this.options.silentMode,
+                width: finalWidth,
+                height: finalHeight,
+                // 性能优化
+                removeContainer: true, // 截图后移除临时容器
+                imageTimeout: this.options.imageLoadTimeout || 5000,
+                // 忽略某些元素（可选，提升性能）
+                ignoreElements: (element) => {
+                    // 忽略隐藏元素
+                    const style = window.getComputedStyle(element);
+                    if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
+                        return true;
+                    }
+                    return false;
+                },
+            };
+            // html2canvas 不支持直接的 proxy 选项，需要通过 onclone 钩子处理图片
+            // 如果配置了代理服务器，在克隆时替换图片 URL
+            if (this.options.useProxy && this.options.proxyUrl && this.options.proxyUrl.trim() !== '') {
+                options.onclone = (clonedDoc) => {
+                    // 在克隆的文档中，替换所有跨域图片的 src
+                    const images = clonedDoc.querySelectorAll('img');
+                    images.forEach((img) => {
+                        const originalSrc = img.getAttribute('src');
+                        if (!originalSrc)
+                            return;
+                        // 检查是否是跨域图片
+                        try {
+                            const imgUrl = new URL(originalSrc, window.location.href);
+                            if (imgUrl.origin === window.location.origin) {
+                                return; // 同源图片，不需要处理
+                            }
+                        }
+                        catch {
+                            // URL 解析失败，可能是相对路径，继续处理
+                        }
+                        // 检查缓存
+                        const cachedDataUrl = this.getCachedImage(originalSrc);
+                        if (cachedDataUrl) {
+                            img.src = cachedDataUrl;
+                            return;
+                        }
+                        // 对于跨域图片，使用代理 URL
+                        // html2canvas 会自动处理，但我们可以预先处理
+                        // 注意：html2canvas 会自己处理图片加载，这里主要是为了缓存
+                    });
+                };
+            }
+            if (!this.options.silentMode) {
+                console.log(`📸 html2canvas 配置: 尺寸 ${finalWidth}x${finalHeight}, 质量 ${finalQuality.toFixed(2)}, 缩放 ${options.scale}`);
+            }
+            // 执行截图
+            const canvas = await html2canvas(element, options);
+            // 根据输出格式转换
+            let mimeType = 'image/png';
+            let finalQualityForExport = undefined;
+            if (this.options.outputFormat === 'webp' && !isMobile) {
+                try {
+                    const testCanvas = document.createElement('canvas');
+                    testCanvas.width = 1;
+                    testCanvas.height = 1;
+                    const testDataUrl = testCanvas.toDataURL('image/webp');
+                    if (testDataUrl.indexOf('webp') !== -1) {
+                        mimeType = 'image/webp';
+                        finalQualityForExport = finalQuality;
+                    }
+                }
+                catch {
+                    mimeType = 'image/jpeg';
+                    finalQualityForExport = finalQuality;
+                }
+            }
+            else if (this.options.outputFormat === 'jpeg') {
+                mimeType = 'image/jpeg';
+                finalQualityForExport = finalQuality;
+            }
+            // 转换为 data URL
+            const dataUrl = mimeType === 'image/png'
+                ? canvas.toDataURL(mimeType)
+                : canvas.toDataURL(mimeType, finalQualityForExport);
+            // 验证结果
+            if (!dataUrl || dataUrl.length < 100) {
+                throw new Error('生成的截图数据无效或过短');
+            }
+            if (!this.options.silentMode) {
+                console.log(`📸 html2canvas 截图成功！格式: ${this.options.outputFormat}, 尺寸: ${canvas.width}x${canvas.height}`);
+            }
+            return dataUrl;
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            if (!this.options.silentMode) {
+                console.error('📸 html2canvas 截图失败:', errorMessage);
+                if (errorMessage.includes('CORS') || errorMessage.includes('cross-origin')) {
+                    console.warn('📸 💡 建议：配置 proxyUrl 选项处理跨域图片');
+                }
+            }
+            throw error;
+        }
+    }
     /**
      * 使用 modern-screenshot 截图（启用 Worker）
+     *
+     * 优势：
+     * - 使用 Worker，不阻塞主线程 UI
+     * - 支持并发处理
+     * - 适合复杂页面
+     *
+     * 劣势：
+     * - 处理 SVG 和本地资源较慢（Worker 通信开销）
+     * - 配置相对复杂
+     * - 需要处理 Worker URL
+     *
+     * 适用场景：
+     * - 复杂页面，需要不阻塞 UI
+     * - 需要高质量截图
+     * - 页面资源较少
      */
     async takeScreenshotWithModernScreenshot(element) {
         if (!this.options.silentMode) {
@@ -7090,13 +7266,19 @@ class ScreenshotManager {
         }
         const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
         const isLowEndDevice = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;
-        const mobileQuality = isMobile || isLowEndDevice ? Math.max(this.options.quality * 0.7, 0.3) : this.options.quality;
-        // 不限制宽度和高度，让 modern-screenshot 自动处理完整内容
-        // 只在需要压缩时才应用尺寸限制
+        // 进一步降低质量以减少 base64 大小
+        // 桌面设备：使用配置的质量（默认 0.3）
+        // 移动设备/低端设备：进一步降低到 0.2（最低）
+        const finalQuality = isMobile || isLowEndDevice
+            ? Math.max(this.options.quality * 0.65, 0.2) // 移动设备：质量 * 0.65，最低 0.2
+            : this.options.quality; // 桌面设备：使用配置的质量（默认 0.3）
+        // 计算压缩后的尺寸（对所有元素都应用，包括 document.body）
+        // 这样可以避免生成过大的截图，减少 base64 大小
         const { width, height } = this.calculateCompressedSize(elementWidth, elementHeight, this.options.maxWidth, this.options.maxHeight);
-        // 如果计算后的尺寸小于元素实际尺寸，说明需要压缩，否则使用元素实际尺寸
-        const finalWidth = width < elementWidth ? width : undefined;
-        const finalHeight = height < elementHeight ? height : undefined;
+        // 对于所有元素都应用尺寸限制（包括 body），避免截图过大
+        // 如果计算后的尺寸小于元素实际尺寸，使用压缩尺寸；否则使用元素实际尺寸（但不超过最大值）
+        const finalWidth = width < elementWidth ? width : Math.min(elementWidth, this.options.maxWidth);
+        const finalHeight = height < elementHeight ? height : Math.min(elementHeight, this.options.maxHeight);
         // 处理跨域图片的函数
         const handleCrossOriginImage = async (url) => {
             // 如果是 data URL 或 blob URL，直接返回
@@ -7195,9 +7377,64 @@ class ScreenshotManager {
                     return url;
                 }
             }
-            // 如果没有配置代理，尝试使用 CORS
+            // 如果没有配置代理，需要添加内存保护机制
+            // 不使用代理时，modern-screenshot 会直接下载图片，可能导致内存问题
+            // 由于已配置 CORS，可以直接下载并检查大小
             if (this.options.enableCORS) {
-                return url;
+                // 对于不使用代理的情况，添加内存保护和缓存机制：
+                // 1. 先检查内存缓存（避免重复下载）
+                // 2. 检查 IndexedDB 缓存
+                // 3. 使用下载队列避免并发重复下载
+                // 4. 下载时检查大小，如果过大则使用占位符
+                // 先检查内存缓存（优先使用缓存，避免重复下载）
+                const cachedDataUrl = this.getCachedImage(url);
+                if (cachedDataUrl) {
+                    if (!this.options.silentMode) {
+                        console.log(`📸 ✅ 使用内存缓存图片（无代理模式）: ${url.substring(0, 50)}...`);
+                    }
+                    return cachedDataUrl;
+                }
+                // 检查 IndexedDB 缓存（如果启用）
+                if (this.options.useIndexedDB) {
+                    const indexedDBCache = await this.getIndexedDBCache(url);
+                    if (indexedDBCache) {
+                        // 同步到内存缓存
+                        this.setCachedImage(url, indexedDBCache);
+                        if (!this.options.silentMode) {
+                            console.log(`📸 ✅ 使用 IndexedDB 缓存图片（无代理模式）: ${url.substring(0, 50)}...`);
+                        }
+                        return indexedDBCache;
+                    }
+                }
+                // 检查是否正在下载（避免重复下载）
+                if (this.imageDownloadQueue.has(url)) {
+                    // 如果已经在下载队列中，等待现有下载完成
+                    if (!this.options.silentMode) {
+                        console.log(`📸 ⏳ 等待图片下载完成: ${url.substring(0, 50)}...`);
+                    }
+                    return await this.imageDownloadQueue.get(url);
+                }
+                // 检查并发下载数限制
+                if (this.activeDownloads.size >= this.maxConcurrentImageDownloads) {
+                    // 并发数已满，返回原 URL，让 modern-screenshot 自己处理（可能会失败，但不阻塞）
+                    if (!this.options.silentMode) {
+                        console.warn(`📸 ⚠️ 并发下载数已满（${this.activeDownloads.size}/${this.maxConcurrentImageDownloads}），跳过: ${url.substring(0, 50)}...`);
+                    }
+                    return url;
+                }
+                // 创建下载 Promise 并加入队列
+                const downloadPromise = this.downloadImageWithoutProxy(url);
+                this.imageDownloadQueue.set(url, downloadPromise);
+                this.activeDownloads.add(url);
+                try {
+                    const result = await downloadPromise;
+                    return result;
+                }
+                finally {
+                    // 下载完成后清理
+                    this.imageDownloadQueue.delete(url);
+                    this.activeDownloads.delete(url);
+                }
             }
             // 默认返回原 URL
             return url;
@@ -7218,11 +7455,14 @@ class ScreenshotManager {
             }
             this.screenshotContext = null;
         }
+        // Worker 数量配置：移动设备/低端设备使用 1 个 Worker，桌面设备使用 2 个
+        // workerNumber > 0 会启用 Worker 模式，截图处理在后台线程执行，不会阻塞主线程 UI
         const workerNumber = isMobile || isLowEndDevice ? 1 : 2;
         // 构建 createContext 配置
+        // 参考: https://github.com/qq15725/modern-screenshot/blob/main/src/options.ts
         const contextOptions = {
-            workerNumber,
-            quality: mobileQuality,
+            workerNumber, // Worker 数量，> 0 启用 Worker 模式
+            quality: finalQuality, // 图片质量（0-1），已优化为更低的值以减少 base64 大小
             fetchFn: handleCrossOriginImage, // 使用代理服务器处理跨域图片
             fetch: {
                 requestInit: {
@@ -7230,35 +7470,45 @@ class ScreenshotManager {
                 },
                 bypassingCache: true,
             },
+            // 设置最大 canvas 尺寸，防止生成过大的 canvas（避免内存问题）
+            // 参考: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
+            // 大多数浏览器限制为 16,777,216 像素（4096x4096），这里设置为更保守的值
+            maximumCanvasSize: 16777216, // 16M 像素（约 4096x4096）
         };
-        // 对于 document.body，不设置 width/height，让 modern-screenshot 自动处理完整页面
-        // 只有在需要压缩且不是 body 元素时才指定尺寸
-        if (element !== document.body && element !== document.documentElement) {
-            if (finalWidth && finalHeight && (finalWidth < elementWidth || finalHeight < elementHeight)) {
-                contextOptions.width = finalWidth;
-                contextOptions.height = finalHeight;
-                if (!this.options.silentMode) {
-                    console.log(`📸 使用压缩尺寸: ${finalWidth}x${finalHeight}`);
+        // 对所有元素都设置尺寸限制（包括 document.body），避免截图过大
+        // 这样可以减少 base64 大小，提高性能
+        if (finalWidth && finalHeight) {
+            contextOptions.width = finalWidth;
+            contextOptions.height = finalHeight;
+            if (!this.options.silentMode) {
+                if (element === document.body || element === document.documentElement) {
+                    console.log(`📸 截取完整页面（document.body），使用压缩尺寸: ${finalWidth}x${finalHeight}`);
                 }
-            }
-            else {
-                if (!this.options.silentMode) {
-                    console.log(`📸 使用元素实际尺寸: ${elementWidth}x${elementHeight}`);
+                else {
+                    console.log(`📸 使用压缩尺寸: ${finalWidth}x${finalHeight}`);
                 }
             }
         }
         else {
-            // 对于 body，不设置尺寸限制，让 modern-screenshot 自动截取完整页面
             if (!this.options.silentMode) {
-                console.log(`📸 截取完整页面（document.body），不设置尺寸限制（让 modern-screenshot 自动处理）`);
+                console.log(`📸 使用元素实际尺寸: ${elementWidth}x${elementHeight}`);
             }
         }
-        // 如果指定了缩放比例，添加缩放配置
+        // 缩放配置：移动设备使用更低的缩放比例，进一步减少图片大小
+        // scale < 1 会降低图片分辨率，减少 base64 大小
         if (this.options.scale !== 1) {
-            contextOptions.scale = isMobile ? 0.8 : this.options.scale;
+            contextOptions.scale = isMobile ? 0.7 : this.options.scale; // 移动设备：0.8 -> 0.7
+        }
+        else if (isMobile) {
+            // 如果未指定 scale，移动设备默认使用 0.7
+            contextOptions.scale = 0.7;
         }
-        // modern-screenshot 会自动处理 worker URL，不需要手动设置
+        // modern-screenshot 会自动处理 worker URL，不需要手动设置 workerUrl
+        // 当 workerNumber > 0 时，截图处理会在 Worker 线程中执行，不会阻塞主线程 UI
         // 创建 Worker 上下文（每次截图都创建新的，确保元素状态最新）
+        if (!this.options.silentMode) {
+            console.log(`📸 Worker 模式: ${workerNumber} 个 Worker，质量: ${finalQuality.toFixed(2)}，缩放: ${contextOptions.scale || 1}`);
+        }
         this.screenshotContext = await createContext$1(element, contextOptions);
         try {
             // 使用 Worker 上下文进行截图
@@ -7287,7 +7537,8 @@ class ScreenshotManager {
                     img.src = dataUrl;
                 });
                 let mimeType = 'image/jpeg';
-                let finalQuality = mobileQuality;
+                // 使用与 createContext 相同的质量设置
+                let conversionQuality = finalQuality;
                 if (this.options.outputFormat === 'webp' && !isMobile) {
                     try {
                         const testCanvas = document.createElement('canvas');
@@ -7302,9 +7553,10 @@ class ScreenshotManager {
                         mimeType = 'image/jpeg';
                     }
                 }
+                // 使用优化后的质量进行格式转换
                 const convertedDataUrl = mimeType === 'image/png'
                     ? canvas.toDataURL(mimeType)
-                    : canvas.toDataURL(mimeType, finalQuality);
+                    : canvas.toDataURL(mimeType, conversionQuality);
                 return convertedDataUrl;
             }
             return dataUrl;
@@ -7780,6 +8032,87 @@ class ScreenshotManager {
         }
         return dataUrl;
     }
+    /**
+     * 不使用代理时下载图片（带内存保护）
+     */
+    async downloadImageWithoutProxy(url) {
+        try {
+            // 直接下载图片并检查大小
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), this.options.imageLoadTimeout || 5000);
+            const response = await fetch(url, {
+                method: 'GET',
+                mode: 'cors',
+                credentials: 'omit',
+                cache: 'no-cache',
+                signal: controller.signal
+            }).catch(() => null).finally(() => {
+                clearTimeout(timeoutId);
+            });
+            if (response && response.ok) {
+                // 检查 Content-Length（如果可用）
+                const contentLength = response.headers.get('content-length');
+                if (contentLength) {
+                    const sizeMB = parseInt(contentLength, 10) / (1024 * 1024);
+                    const maxSizeMB = this.options.maxImageSize || 5;
+                    if (sizeMB > maxSizeMB) {
+                        if (this.options.skipLargeImages) {
+                            // 跳过过大的图片，返回占位符
+                            if (!this.options.silentMode) {
+                                console.warn(`📸 ⚠️ 跳过过大图片（${sizeMB.toFixed(2)}MB > ${maxSizeMB}MB）: ${url.substring(0, 100)}...`);
+                            }
+                            // 返回一个 1x1 的透明占位符，避免截图失败
+                            return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+                        }
+                        else {
+                            // 不跳过，但添加警告
+                            if (!this.options.silentMode) {
+                                console.warn(`📸 ⚠️ 图片较大（${sizeMB.toFixed(2)}MB），可能导致内存问题: ${url.substring(0, 100)}...`);
+                            }
+                        }
+                    }
+                }
+                // 如果大小检查通过或无法获取大小，下载图片并转换为 data URL
+                // 但为了进一步保护内存，在下载 blob 后也检查实际大小
+                const blob = await response.blob();
+                const blobSizeMB = blob.size / (1024 * 1024);
+                const maxSizeMB = this.options.maxImageSize || 5;
+                if (blobSizeMB > maxSizeMB) {
+                    if (this.options.skipLargeImages) {
+                        // 跳过过大的图片，返回占位符
+                        if (!this.options.silentMode) {
+                            console.warn(`📸 ⚠️ 跳过过大图片（实际大小 ${blobSizeMB.toFixed(2)}MB > ${maxSizeMB}MB）: ${url.substring(0, 100)}...`);
+                        }
+                        return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+                    }
+                    else {
+                        // 不跳过，但添加警告
+                        if (!this.options.silentMode) {
+                            console.warn(`📸 ⚠️ 图片较大（实际大小 ${blobSizeMB.toFixed(2)}MB），可能导致内存问题: ${url.substring(0, 100)}...`);
+                        }
+                    }
+                }
+                // 转换为 data URL
+                const dataUrl = await this.blobToDataUrl(blob);
+                // 缓存结果（带时间戳，10分钟有效）
+                this.setCachedImage(url, dataUrl);
+                // 如果启用 IndexedDB，也保存到 IndexedDB
+                if (this.options.useIndexedDB) {
+                    await this.setIndexedDBCache(url, dataUrl);
+                }
+                return dataUrl;
+            }
+            // 如果下载失败，返回原 URL，让 modern-screenshot 自己处理
+            return url;
+        }
+        catch (error) {
+            // 下载失败，返回原 URL，让 modern-screenshot 自己处理
+            if (!this.options.silentMode) {
+                console.warn(`📸 ⚠️ 下载图片失败: ${url.substring(0, 100)}...`, error);
+            }
+            return url;
+        }
+    }
     /**
      * 将 blob 转换为 data URL
      */