customer-chat-sdk 1.0.25 → 1.0.27

package/dist/customer-sdk.esm.js

@@ -1,4 +1,4 @@
-import html2canvas from 'html2canvas';
+import { destroyContext, createContext, domToPng } from 'modern-screenshot';
 
 // 直接使用base64字符串，避免打包后路径问题
 const iconImage = 'data:image/png;base64,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';
@@ -921,7 +921,29 @@ class IframeManager {
     }
 }
 
-// @ts-ignore - html2canvas may not have type definitions
+// @ts-ignore - modern-screenshot may not have type definitions
+// Worker URL 将在创建上下文时动态获取
+// 在 Vite 环境中可以使用: import workerUrl from 'modern-screenshot/worker?url'
+// 在 Rollup 中，modern-screenshot 会自动处理 worker URL
+let workerUrl = undefined;
+// 尝试动态获取 worker URL（仅在支持的环境中）
+async function getWorkerUrl() {
+    if (workerUrl) {
+        return workerUrl;
+    }
+    try {
+        // 尝试使用 Vite 的 ?url 语法（仅在 Vite 环境中有效）
+        // @ts-ignore - Vite 特有的 ?url 语法
+        const workerModule = await import('modern-screenshot/worker?url');
+        workerUrl = workerModule.default || workerModule;
+        return workerUrl;
+    }
+    catch {
+        // Rollup 或其他构建工具不支持 ?url 语法
+        // modern-screenshot 会自动处理 worker URL，返回 undefined 即可
+        return undefined;
+    }
+}
 /**
  * 截图管理器
  * 负责页面截图、压缩和上传功能
@@ -943,6 +965,8 @@ class ScreenshotManager {
         // WebWorker 相关
         this.worker = null;
         this.screenshotTimer = null;
+        // modern-screenshot Worker 上下文（用于复用，避免频繁创建和销毁）
+        this.screenshotContext = null;
         // PostMessage 监听器
         this.messageHandler = null;
         // 动态轮询间隔（由 iframe 消息控制）
@@ -966,7 +990,7 @@ class ScreenshotManager {
             outputFormat: options.outputFormat ?? 'webp',
             enableCORS: options.enableCORS ?? true,
             proxyUrl: options.proxyUrl ?? '',
-            engine: options.engine ?? 'html2canvas',
+            engine: options.engine ?? 'modern-screenshot',
             corsMode: options.corsMode ?? 'canvas-proxy',
             silentMode: options.silentMode ?? false,
             maxRetries: options.maxRetries ?? 2
@@ -978,6 +1002,16 @@ class ScreenshotManager {
      * 设置目标元素
      */
     setTargetElement(element) {
+        // 如果元素改变了，清理旧的 Worker 上下文
+        if (this.targetElement !== element && this.screenshotContext) {
+            try {
+                destroyContext(this.screenshotContext);
+            }
+            catch (e) {
+                // 忽略清理错误
+            }
+            this.screenshotContext = null;
+        }
         this.targetElement = element;
     }
     /**
@@ -1266,10 +1300,10 @@ class ScreenshotManager {
                 this.waitForStylesAndFonts(),
                 this.waitForFonts()
             ]);
-            // 选择截图引擎（仅支持 html2canvas）
-            const selectedEngine = 'html2canvas';
+            // 选择截图引擎（仅支持 modern-screenshot）
+            const selectedEngine = 'modern-screenshot';
             if (!this.options.silentMode) {
-                console.log(`📸 使用截图引擎: ${selectedEngine}`);
+                console.log(`📸 使用截图引擎: ${selectedEngine} (Worker 模式)`);
             }
             // 预处理网络图片
             if (this.options.enableCORS) {
@@ -1279,8 +1313,8 @@ class ScreenshotManager {
             let dataUrl;
             // 等待一小段时间，确保 DOM 更新完成
             await new Promise(resolve => setTimeout(resolve, 100));
-            // 使用 html2canvas 截图
-            dataUrl = await this.takeScreenshotWithHtml2Canvas(this.targetElement);
+            // 使用 modern-screenshot 截图（启用 Worker）
+            dataUrl = await this.takeScreenshotWithModernScreenshot(this.targetElement);
             const timestamp = Date.now();
             // 更新状态
             this.screenshotCount++;
@@ -1345,11 +1379,11 @@ class ScreenshotManager {
         }
     }
     /**
-     * 使用 html2canvas 截图
+     * 使用 modern-screenshot 截图（启用 Worker）
      */
-    async takeScreenshotWithHtml2Canvas(element) {
+    async takeScreenshotWithModernScreenshot(element) {
         if (!this.options.silentMode) {
-            console.log('📸 使用 html2canvas 引擎截图...');
+            console.log('📸 使用 modern-screenshot 引擎截图（Worker 模式）...');
         }
         const { width, height } = this.calculateCompressedSize(element.scrollWidth, element.scrollHeight, this.options.maxWidth, this.options.maxHeight);
         const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
@@ -1357,85 +1391,164 @@ class ScreenshotManager {
         const mobileQuality = isMobile || isLowEndDevice ? Math.max(this.options.quality * 0.7, 0.3) : this.options.quality;
         const mobileWidth = isMobile ? Math.min(width, 1280) : width;
         const mobileHeight = isMobile ? Math.min(height, 720) : height;
-        const canvas = await html2canvas(element, {
-            useCORS: this.options.enableCORS,
-            allowTaint: true,
-            scale: isMobile ? 0.8 : this.options.scale,
-            backgroundColor: '#ffffff',
-            logging: false,
-            width: mobileWidth,
-            height: mobileHeight,
-            scrollX: 0,
-            scrollY: 0,
-            removeContainer: false,
-            foreignObjectRendering: false,
-            onclone: (clonedDoc) => {
-                const clonedImages = clonedDoc.querySelectorAll('img');
-                clonedImages.forEach((img) => {
-                    if (img.src && !img.src.startsWith('data:') && !img.src.startsWith('blob:')) {
-                        try {
-                            const imgUrl = new URL(img.src, window.location.href);
-                            const currentOrigin = window.location.origin;
-                            if (this.options.proxyUrl && img.src.includes(this.options.proxyUrl.split('/api/image-proxy')[0])) {
-                                return;
-                            }
-                            if (imgUrl.origin !== currentOrigin) {
-                                if (this.options.corsMode === 'canvas-proxy') {
-                                    const cachedDataUrl = this.imageProxyCache.get(img.src);
-                                    if (cachedDataUrl) {
-                                        img.src = cachedDataUrl;
-                                    }
-                                    else if (img.crossOrigin) {
-                                        img.removeAttribute('crossOrigin');
-                                    }
-                                }
-                                else if (!img.crossOrigin) {
-                                    img.crossOrigin = 'anonymous';
-                                }
-                            }
-                        }
-                        catch (e) {
-                            // URL 解析失败，跳过
-                        }
-                    }
-                });
-            },
-            ignoreElements: (element) => {
-                const htmlElement = element;
-                return element.classList.contains('van-popup') ||
-                    element.classList.contains('van-overlay') ||
-                    element.classList.contains('van-toast') ||
-                    element.classList.contains('van-dialog') ||
-                    element.classList.contains('van-loading') ||
-                    htmlElement.style.display === 'none' ||
-                    htmlElement.style.visibility === 'hidden';
-            },
-            imageTimeout: 15000
-        });
-        let mimeType = 'image/jpeg';
-        let finalQuality = mobileQuality;
-        if (this.options.outputFormat === 'webp' && !isMobile) {
+        // 处理跨域图片的函数
+        const handleCrossOriginImage = async (url) => {
+            // 如果是 data URL 或 blob URL，直接返回
+            if (url.startsWith('data:') || url.startsWith('blob:')) {
+                return url;
+            }
+            // 如果是同源图片，直接返回
             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';
+                const imgUrl = new URL(url, window.location.href);
+                if (imgUrl.origin === window.location.origin) {
+                    return url;
                 }
             }
-            catch {
-                mimeType = 'image/jpeg';
+            catch (e) {
+                // URL 解析失败，继续处理
+            }
+            // 如果配置了代理服务器，使用代理处理跨域图片
+            if (this.options.proxyUrl && this.options.proxyUrl.trim() !== '') {
+                // 检查缓存
+                if (this.imageProxyCache.has(url)) {
+                    return this.imageProxyCache.get(url);
+                }
+                try {
+                    // 构建代理请求参数
+                    const params = new URLSearchParams({
+                        url: url,
+                        maxWidth: String(this.options.maxWidth || 1600),
+                        maxHeight: String(this.options.maxHeight || 900),
+                        quality: String(Math.round((this.options.quality || 0.4) * 100)),
+                        format: this.options.outputFormat || 'webp'
+                    });
+                    let baseUrl = this.options.proxyUrl;
+                    baseUrl = baseUrl.replace(/[?&]$/, '');
+                    const proxyUrl = `${baseUrl}?${params.toString()}`;
+                    // 请求代理服务器
+                    const response = await fetch(proxyUrl, {
+                        method: 'GET',
+                        mode: 'cors',
+                        credentials: 'omit',
+                        headers: {
+                            'Accept': 'image/*'
+                        },
+                        cache: 'no-cache'
+                    });
+                    if (!response.ok) {
+                        throw new Error(`代理请求失败: ${response.status}`);
+                    }
+                    const blob = await response.blob();
+                    const dataUrl = await this.blobToDataUrl(blob);
+                    // 缓存结果
+                    this.imageProxyCache.set(url, dataUrl);
+                    return dataUrl;
+                }
+                catch (error) {
+                    if (!this.options.silentMode) {
+                        console.warn(`📸 代理处理图片失败: ${url.substring(0, 100)}...`, error);
+                    }
+                    // 失败时返回原 URL
+                    return url;
+                }
             }
+            // 如果没有配置代理，尝试使用 CORS
+            if (this.options.enableCORS) {
+                return url;
+            }
+            // 默认返回原 URL
+            return url;
+        };
+        // 如果还没有创建 Worker 上下文，则创建
+        if (!this.screenshotContext) {
+            const workerNumber = isMobile || isLowEndDevice ? 1 : 2;
+            // 构建 createContext 配置
+            const contextOptions = {
+                workerNumber,
+                quality: mobileQuality,
+                fetchFn: handleCrossOriginImage, // 使用代理服务器处理跨域图片
+                fetch: {
+                    requestInit: {
+                        cache: 'no-cache',
+                    },
+                    bypassingCache: true,
+                },
+            };
+            // 如果指定了尺寸，添加尺寸配置
+            if (mobileWidth && mobileHeight) {
+                contextOptions.width = mobileWidth;
+                contextOptions.height = mobileHeight;
+            }
+            // 如果指定了缩放比例，添加缩放配置
+            if (this.options.scale !== 1) {
+                contextOptions.scale = isMobile ? 0.8 : this.options.scale;
+            }
+            // 尝试设置 workerUrl（如果可用）
+            const resolvedWorkerUrl = await getWorkerUrl();
+            if (resolvedWorkerUrl) {
+                contextOptions.workerUrl = resolvedWorkerUrl;
+            }
+            // 创建 Worker 上下文
+            this.screenshotContext = await createContext(element, contextOptions);
+        }
+        try {
+            // 使用 Worker 上下文进行截图
+            const dataUrl = await domToPng(this.screenshotContext);
+            // 根据输出格式转换
+            if (this.options.outputFormat !== 'png') {
+                // modern-screenshot 默认输出 PNG，如果需要其他格式，需要转换
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                if (!ctx) {
+                    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';
+                let finalQuality = mobileQuality;
+                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';
+                    }
+                }
+                const convertedDataUrl = mimeType === 'image/png'
+                    ? canvas.toDataURL(mimeType)
+                    : canvas.toDataURL(mimeType, finalQuality);
+                return convertedDataUrl;
+            }
+            return dataUrl;
         }
-        else if (this.options.outputFormat === 'png') {
-            mimeType = 'image/png';
-            finalQuality = undefined;
+        catch (error) {
+            // 如果截图失败，清理上下文以便下次重新创建
+            if (this.screenshotContext) {
+                try {
+                    destroyContext(this.screenshotContext);
+                }
+                catch (e) {
+                    // 忽略清理错误
+                }
+                this.screenshotContext = null;
+            }
+            throw error;
         }
-        const dataUrl = mimeType === 'image/png'
-            ? canvas.toDataURL(mimeType)
-            : canvas.toDataURL(mimeType, finalQuality);
-        return dataUrl;
     }
     /**
      * 预处理网络图片
@@ -1548,7 +1661,7 @@ class ScreenshotManager {
             throw new Error(`代理请求失败: ${response.status} ${response.statusText}${errorText ? ` - ${errorText.substring(0, 200)}` : ''}`);
         }
         const blob = await response.blob();
-        // 将 blob 转换为 data URL（用于 html2canvas 兼容性）
+        // 将 blob 转换为 data URL（用于 modern-screenshot 兼容性）
         const dataUrl = await this.blobToDataUrl(blob);
         if (!this.options.silentMode) {
             console.log(`📸 ✅ 代理模式成功（已转换为 data URL）: ${imageUrl.substring(0, 100)}...`);
@@ -1678,7 +1791,9 @@ class ScreenshotManager {
             newWorker.onerror = (e) => {
                 console.error('📸 WebWorker 错误:', e);
             };
-            URL.revokeObjectURL(workerUrl);
+            // 注意：不要立即 revokeObjectURL，因为 Worker 需要这个 URL 保持有效
+            // 在 destroy() 方法中清理 Worker 时再 revoke
+            // URL.revokeObjectURL(workerUrl) // 已移除，在 destroy 时清理
             return newWorker;
         }
         catch (err) {
@@ -1809,6 +1924,16 @@ class ScreenshotManager {
             this.worker.terminate();
             this.worker = null;
         }
+        // 清理 modern-screenshot Worker 上下文
+        if (this.screenshotContext) {
+            try {
+                destroyContext(this.screenshotContext);
+            }
+            catch (e) {
+                // 忽略清理错误
+            }
+            this.screenshotContext = null;
+        }
         if (this.expirationTimer) {
             clearTimeout(this.expirationTimer);
             this.expirationTimer = null;
@@ -1818,6 +1943,8 @@ class ScreenshotManager {
             this.messageHandler = null;
         }
         this.removeGlobalErrorHandlers();
+        // 清理图片代理缓存
+        this.imageProxyCache.clear();
     }
     /**
      * 获取状态