customer-chat-sdk 1.0.35 → 1.0.37

package/dist/customer-sdk.esm.js

@@ -6896,28 +6896,62 @@ class ScreenshotManager {
                 }
             }
             let dataUrl;
-            // 等待一小段时间，确保 DOM 更新完成（减少等待时间）
-            await new Promise(resolve => setTimeout(resolve, 50));
             // 根据选择的引擎进行截图
-            if (selectedEngine === 'snapdom') {
-                dataUrl = await this.takeScreenshotWithSnapdom(this.targetElement);
-            }
-            else if (selectedEngine === 'html2canvas') {
+            if (selectedEngine === 'html2canvas') {
+                // html2canvas 需要更长的等待时间确保样式加载
+                // 额外等待样式和字体加载完成
+                await Promise.all([
+                    this.waitForStylesAndFonts(),
+                    this.waitForFonts()
+                ]);
+                // 再等待一段时间，确保样式完全应用
+                await new Promise(resolve => setTimeout(resolve, 200));
                 dataUrl = await this.takeScreenshotWithHtml2Canvas(this.targetElement);
             }
+            else if (selectedEngine === 'snapdom') {
+                // 等待一小段时间，确保 DOM 更新完成
+                await new Promise(resolve => setTimeout(resolve, 50));
+                dataUrl = await this.takeScreenshotWithSnapdom(this.targetElement);
+            }
             else {
                 // 默认使用 modern-screenshot
+                // 等待一小段时间，确保 DOM 更新完成
+                await new Promise(resolve => setTimeout(resolve, 50));
                 dataUrl = await this.takeScreenshotWithModernScreenshot(this.targetElement);
             }
             const timestamp = Date.now();
             // 更新状态
             this.screenshotCount++;
             this.lastScreenshotTime = timestamp;
-            // 管理历史记录
+            // 管理历史记录（限制内存占用）
+            // base64 字符串很大，需要严格控制历史记录数量
             if (this.screenshotHistory.length >= this.options.maxHistory) {
-                this.screenshotHistory.shift();
+                // 删除最旧的截图，释放内存
+                const removed = this.screenshotHistory.shift();
+                // 强制 GC（如果可能）
+                if (removed && removed.length > 1000000) { // 大于1MB的字符串
+                    if (!this.options.silentMode) {
+                        console.log(`📸 清理旧截图，释放内存: ${Math.round(removed.length * 0.75 / 1024)} KB`);
+                    }
+                }
             }
             this.screenshotHistory.push(dataUrl);
+            // 如果历史记录总大小超过限制，清理最旧的
+            let totalSize = this.screenshotHistory.reduce((sum, item) => sum + item.length, 0);
+            const maxTotalSize = 50 * 1024 * 1024; // 最大50MB
+            while (this.screenshotHistory.length > 0 && totalSize > maxTotalSize) {
+                const removed = this.screenshotHistory.shift();
+                if (removed) {
+                    const removedSize = removed.length;
+                    totalSize -= removedSize;
+                    if (!this.options.silentMode) {
+                        console.warn(`📸 ⚠️ 历史记录总大小超过限制，清理最旧截图: ${Math.round(removedSize * 0.75 / 1024)} KB`);
+                    }
+                }
+                else {
+                    break;
+                }
+            }
             // 打印基本信息
             const base64Data = dataUrl.split(',')[1];
             if (!this.options.silentMode) {
@@ -7089,6 +7123,19 @@ class ScreenshotManager {
             console.log('📸 使用 html2canvas 引擎截图...');
         }
         try {
+            // html2canvas 需要确保样式完全加载，额外等待
+            // 等待所有样式表加载完成
+            await this.waitForAllStylesLoaded();
+            // 等待字体加载完成
+            await this.waitForFonts();
+            // 等待 DOM 完全渲染
+            await new Promise(resolve => {
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        setTimeout(() => resolve(), 100);
+                    });
+                });
+            });
             // 检查元素是否存在和可见
             const rect = element.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) {
@@ -7120,6 +7167,37 @@ class ScreenshotManager {
                 logging: !this.options.silentMode,
                 width: finalWidth,
                 height: finalHeight,
+                // 关键配置：确保样式正确渲染
+                // 注意：foreignObjectRendering 可能导致样式问题，改为 true 或移除此选项
+                // foreignObjectRendering: false, // 移除或设为 true，让 html2canvas 自动选择最佳渲染方式
+                onclone: (clonedDoc, _clonedElement) => {
+                    // 在克隆的文档中，确保所有样式都正确应用
+                    // html2canvas 会自动处理样式，但我们可以确保样式表被正确加载
+                    // 确保克隆文档的样式表链接正确
+                    const originalLinks = document.querySelectorAll('link[rel="stylesheet"]');
+                    const clonedLinks = clonedDoc.querySelectorAll('link[rel="stylesheet"]');
+                    // 如果克隆文档缺少样式表链接，从原始文档复制
+                    if (clonedLinks.length < originalLinks.length) {
+                        originalLinks.forEach((link) => {
+                            const href = link.getAttribute('href');
+                            if (href && !clonedDoc.querySelector(`link[href="${href}"]`)) {
+                                const newLink = clonedDoc.createElement('link');
+                                newLink.rel = 'stylesheet';
+                                newLink.href = href;
+                                clonedDoc.head.appendChild(newLink);
+                            }
+                        });
+                    }
+                    // 确保内联样式被正确复制
+                    const originalStyle = document.querySelector('style');
+                    if (originalStyle && originalStyle.textContent) {
+                        const clonedStyle = clonedDoc.createElement('style');
+                        clonedStyle.textContent = originalStyle.textContent;
+                        if (!clonedDoc.head.querySelector('style')) {
+                            clonedDoc.head.appendChild(clonedStyle);
+                        }
+                    }
+                },
                 // 性能优化
                 removeContainer: true, // 截图后移除临时容器
                 imageTimeout: this.options.imageLoadTimeout || 5000,
@@ -7136,7 +7214,13 @@ class ScreenshotManager {
             // html2canvas 不支持直接的 proxy 选项，需要通过 onclone 钩子处理图片
             // 如果配置了代理服务器，在克隆时替换图片 URL
             if (this.options.useProxy && this.options.proxyUrl && this.options.proxyUrl.trim() !== '') {
-                options.onclone = (clonedDoc) => {
+                // 保存原始的 onclone
+                const originalOnclone = options.onclone;
+                options.onclone = (clonedDoc, clonedElement) => {
+                    // 先执行原始的样式处理逻辑
+                    if (originalOnclone) {
+                        originalOnclone(clonedDoc, clonedElement);
+                    }
                     // 在克隆的文档中，替换所有跨域图片的 src
                     const images = clonedDoc.querySelectorAll('img');
                     images.forEach((img) => {
@@ -7526,37 +7610,49 @@ class ScreenshotManager {
                     throw new Error('无法获取 canvas context');
                 }
                 const img = new Image();
-                await new Promise((resolve, reject) => {
-                    img.onload = () => {
-                        canvas.width = img.width;
-                        canvas.height = img.height;
-                        ctx.drawImage(img, 0, 0);
-                        resolve();
-                    };
-                    img.onerror = reject;
-                    img.src = dataUrl;
-                });
-                let mimeType = 'image/jpeg';
-                // 使用与 createContext 相同的质量设置
-                let conversionQuality = finalQuality;
-                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';
+                let convertedDataUrl;
+                try {
+                    await new Promise((resolve, reject) => {
+                        img.onload = () => {
+                            canvas.width = img.width;
+                            canvas.height = img.height;
+                            ctx.drawImage(img, 0, 0);
+                            resolve();
+                        };
+                        img.onerror = reject;
+                        img.src = dataUrl;
+                    });
+                    let mimeType = 'image/jpeg';
+                    // 使用与 createContext 相同的质量设置
+                    let conversionQuality = finalQuality;
+                    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';
+                            }
+                        }
+                        catch {
+                            mimeType = 'image/jpeg';
                         }
                     }
-                    catch {
-                        mimeType = 'image/jpeg';
-                    }
+                    // 使用优化后的质量进行格式转换
+                    convertedDataUrl = mimeType === 'image/png'
+                        ? canvas.toDataURL(mimeType)
+                        : canvas.toDataURL(mimeType, conversionQuality);
+                }
+                finally {
+                    // 清理资源，释放内存
+                    img.src = ''; // 清除图片引用
+                    img.onload = null;
+                    img.onerror = null;
+                    canvas.width = 0; // 清空 canvas
+                    canvas.height = 0;
+                    ctx.clearRect(0, 0, 0, 0); // 清除绘制内容
                 }
-                // 使用优化后的质量进行格式转换
-                const convertedDataUrl = mimeType === 'image/png'
-                    ? canvas.toDataURL(mimeType)
-                    : canvas.toDataURL(mimeType, conversionQuality);
                 return convertedDataUrl;
             }
             return dataUrl;
@@ -7577,15 +7673,34 @@ class ScreenshotManager {
             throw error;
         }
         finally {
-            // 每次截图后清理 context，下次重新创建（确保元素状态最新）
+            // 每次截图后立即清理 context，释放 Worker 和内存
+            // 这是防止内存泄漏的关键步骤
             if (this.screenshotContext) {
                 try {
                     destroyContext(this.screenshotContext);
+                    if (!this.options.silentMode) {
+                        console.log('📸 ✅ modern-screenshot context 已清理');
+                    }
                 }
                 catch (e) {
-                    // 忽略清理错误
+                    if (!this.options.silentMode) {
+                        console.warn('📸 ⚠️ 清理 context 失败:', e);
+                    }
+                }
+                finally {
+                    // 确保 context 引用被清除
+                    this.screenshotContext = null;
+                }
+            }
+            // 强制触发垃圾回收（如果可能）
+            // 注意：这需要浏览器支持，不是所有浏览器都有效
+            if (typeof window !== 'undefined' && window.gc && typeof window.gc === 'function') {
+                try {
+                    window.gc();
+                }
+                catch {
+                    // 忽略 GC 错误
                 }
-                this.screenshotContext = null;
             }
         }
     }
@@ -8160,15 +8275,42 @@ class ScreenshotManager {
         }
     }
     /**
-     * 等待 CSS 和字体加载完成（优化：减少等待时间，使用 requestAnimationFrame）
+     * 等待 CSS 和字体加载完成
+     * html2canvas 需要确保所有样式表都加载完成才能正确截图
      */
     async waitForStylesAndFonts() {
-        // 使用 requestAnimationFrame 优化渲染时机
-        return new Promise((resolve) => {
-            requestAnimationFrame(() => {
-                setTimeout(() => {
+        // 等待所有样式表加载完成
+        const styleSheets = Array.from(document.styleSheets);
+        const styleSheetPromises = styleSheets.map((sheet) => {
+            return new Promise((resolve) => {
+                try {
+                    // 检查样式表是否已加载
+                    // 尝试访问 cssRules，如果成功说明样式表已加载
+                    const rules = sheet.cssRules;
+                    if (rules) {
+                        resolve();
+                    }
+                    else {
+                        // 如果样式表还在加载，等待一下
+                        setTimeout(() => resolve(), 100);
+                    }
+                }
+                catch (e) {
+                    // 跨域样式表可能无法访问，忽略错误
                     resolve();
-                }, 30); // 减少到30ms
+                }
+            });
+        });
+        await Promise.all(styleSheetPromises);
+        // 使用 requestAnimationFrame 确保 DOM 已渲染
+        await new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    // 额外等待，确保样式应用完成
+                    setTimeout(() => {
+                        resolve();
+                    }, 100); // 增加到100ms，确保样式加载
+                });
             });
         });
     }
@@ -8187,6 +8329,75 @@ class ScreenshotManager {
             // 忽略错误
         }
     }
+    /**
+     * 等待所有样式表加载完成（html2canvas 专用）
+     * 增强版：确保所有样式表都完全加载
+     */
+    async waitForAllStylesLoaded() {
+        const styleSheets = Array.from(document.styleSheets);
+        const promises = [];
+        styleSheets.forEach((sheet) => {
+            promises.push(new Promise((resolve) => {
+                try {
+                    // 尝试访问样式表规则，如果成功说明样式表已加载
+                    const rules = sheet.cssRules;
+                    if (rules && rules.length > 0) {
+                        // 样式表已加载且有规则
+                        resolve();
+                    }
+                    else if (rules) {
+                        // 样式表已加载但可能没有规则（空样式表）
+                        resolve();
+                    }
+                    else {
+                        // 等待样式表加载
+                        let checkCount = 0;
+                        const maxChecks = 100; // 最多检查100次（5秒）
+                        const checkInterval = setInterval(() => {
+                            checkCount++;
+                            try {
+                                const currentRules = sheet.cssRules;
+                                if (currentRules) {
+                                    clearInterval(checkInterval);
+                                    resolve();
+                                }
+                                else if (checkCount >= maxChecks) {
+                                    // 超时，可能样式表无法访问
+                                    clearInterval(checkInterval);
+                                    resolve();
+                                }
+                            }
+                            catch {
+                                // 跨域样式表无法访问，直接 resolve
+                                clearInterval(checkInterval);
+                                resolve();
+                            }
+                        }, 50);
+                        // 超时保护（5秒）
+                        setTimeout(() => {
+                            clearInterval(checkInterval);
+                            resolve();
+                        }, 5000);
+                    }
+                }
+                catch (e) {
+                    // 跨域样式表无法访问，直接 resolve
+                    resolve();
+                }
+            }));
+        });
+        await Promise.all(promises);
+        // 额外等待，确保样式应用（增加到300ms，确保样式完全应用）
+        await new Promise(resolve => setTimeout(resolve, 300));
+        // 再次使用 requestAnimationFrame 确保渲染完成
+        await new Promise(resolve => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    setTimeout(() => resolve(), 100);
+                });
+            });
+        });
+    }
     /**
      * 计算压缩后的尺寸
      */
@@ -8403,6 +8614,11 @@ class ScreenshotManager {
         }
         // 清理图片代理缓存
         this.imageProxyCache.clear();
+        // 清理截图历史记录（释放大量内存）
+        this.screenshotHistory.length = 0;
+        // 清理图片下载队列
+        this.imageDownloadQueue.clear();
+        this.activeDownloads.clear();
     }
     /**
      * 获取缓存的图片（检查是否过期）
@@ -8424,8 +8640,34 @@ class ScreenshotManager {
     }
     /**
      * 设置缓存的图片（带时间戳）
+     * 添加内存大小限制，防止缓存无限增长
      */
     setCachedImage(url, dataUrl) {
+        // 估算当前缓存总大小（MB）
+        let totalSizeMB = 0;
+        this.imageProxyCache.forEach((cached) => {
+            totalSizeMB += cached.dataUrl.length * 0.75 / (1024 * 1024); // base64 转字节再转MB
+        });
+        // 添加新项的大小
+        const newItemSizeMB = dataUrl.length * 0.75 / (1024 * 1024);
+        const maxCacheSizeMB = 100; // 最大100MB内存缓存
+        // 如果超过限制，清理最旧的缓存
+        if (totalSizeMB + newItemSizeMB > maxCacheSizeMB) {
+            const sortedEntries = Array.from(this.imageProxyCache.entries())
+                .sort((a, b) => a[1].timestamp - b[1].timestamp); // 按时间排序
+            let currentSizeMB = totalSizeMB;
+            for (const [key, value] of sortedEntries) {
+                if (currentSizeMB + newItemSizeMB <= maxCacheSizeMB) {
+                    break;
+                }
+                const itemSizeMB = value.dataUrl.length * 0.75 / (1024 * 1024);
+                this.imageProxyCache.delete(key);
+                currentSizeMB -= itemSizeMB;
+                if (!this.options.silentMode) {
+                    console.log(`📸 清理内存缓存（超过限制）: ${key.substring(0, 50)}...`);
+                }
+            }
+        }
         this.imageProxyCache.set(url, {
             dataUrl,
             timestamp: Date.now()
@@ -8452,9 +8694,10 @@ class ScreenshotManager {
     }
     /**
      * 定期清理过期缓存（可选，在截图时也会自动清理）
+     * 增加清理频率，防止内存积累
      */
     startCacheCleanup() {
-        // 每5分钟清理一次过期缓存
+        // 每2分钟清理一次过期缓存（从5分钟改为2分钟，更频繁）
         setInterval(() => {
             this.cleanExpiredCache();
             // 如果启用 IndexedDB，也清理 IndexedDB 缓存
@@ -8465,9 +8708,12 @@ class ScreenshotManager {
             }
             if (!this.options.silentMode) {
                 const memoryCacheSize = this.imageProxyCache.size;
-                console.log(`📸 清理过期缓存，内存缓存数量: ${memoryCacheSize}`);
+                const memoryCacheSizeMB = Array.from(this.imageProxyCache.values())
+                    .reduce((sum, cached) => sum + cached.dataUrl.length * 0.75 / (1024 * 1024), 0);
+                const historySizeMB = this.screenshotHistory.reduce((sum, item) => sum + item.length * 0.75 / (1024 * 1024), 0);
+                console.log(`📸 清理过期缓存，内存缓存: ${memoryCacheSize} 项，${memoryCacheSizeMB.toFixed(2)} MB，历史记录: ${historySizeMB.toFixed(2)} MB`);
             }
-        }, 300000); // 5分钟
+        }, 120000); // 2分钟（从5分钟改为2分钟，更频繁清理）
     }
     /**
      * 获取状态