customer-chat-sdk 1.0.46 → 1.0.48

package/dist/customer-sdk.esm.js

@@ -14878,27 +14878,43 @@ class ScreenshotManager {
                 console.log(`📸 原始大小: ${Math.round(base64Data.length * 0.75 / 1024)} KB`);
                 console.log(`📸 Base64 长度: ${base64Data.length} 字符`);
             }
-            // 检测移动设备和低端设备
-            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-            const isLowEndDevice = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;
-            // 如果启用压缩（仅在非移动设备上启用）
-            const shouldCompress = this.options.compress && !isMobile && !isLowEndDevice;
-            if (shouldCompress && this.worker) {
-                if (!this.options.silentMode) {
-                    console.log('📸 发送到 WebWorker 进行压缩...');
+            // 如果启用压缩（所有设备都支持）
+            const shouldCompress = this.options.compress;
+            if (shouldCompress) {
+                // 确保 Worker 已创建
+                if (!this.worker) {
+                    this.worker = this.createWorker();
+                    if (!this.options.silentMode) {
+                        if (this.worker) {
+                            console.log('📸 Worker 已创建，准备压缩');
+                        }
+                        else {
+                            console.warn('📸 ⚠️ Worker 创建失败，无法使用压缩功能');
+                        }
+                    }
+                }
+                if (this.worker) {
+                    if (!this.options.silentMode) {
+                        console.log('📸 发送到 WebWorker 进行压缩...');
+                    }
+                    this.worker.postMessage({
+                        type: 'COMPRESS_IMAGE',
+                        data: {
+                            dataUrl,
+                            maxWidth: this.options.maxWidth,
+                            maxHeight: this.options.maxHeight,
+                            quality: this.options.quality,
+                            outputFormat: this.options.outputFormat,
+                            timestamp,
+                            count: this.screenshotCount
+                        }
+                    });
                 }
-                this.worker.postMessage({
-                    type: 'COMPRESS_IMAGE',
-                    data: {
-                        dataUrl,
-                        maxWidth: this.options.maxWidth,
-                        maxHeight: this.options.maxHeight,
-                        quality: this.options.quality,
-                        outputFormat: this.options.outputFormat,
-                        timestamp,
-                        count: this.screenshotCount
+                else {
+                    if (!this.options.silentMode) {
+                        console.warn('📸 ⚠️ Worker 不可用，跳过压缩（使用原始截图）');
                     }
-                });
+                }
             }
             this.error = null;
             return true;
@@ -16693,25 +16709,219 @@ class ScreenshotManager {
         return { width, height };
     }
     /**
-     * 创建 WebWorker
+     * 创建 WebWorker（实现类似 TinyPNG 的智能压缩）
      */
     createWorker() {
-        if (typeof Worker === 'undefined' || typeof OffscreenCanvas === 'undefined') {
+        if (typeof Worker === 'undefined') {
             return null;
         }
         try {
-            // 简化的 Worker 代码（实际使用时需要完整实现）
+            // 完整的 Worker 压缩代码（类似 TinyPNG 的智能压缩）
             const workerCode = `
-        self.onmessage = function(e) {
+        // 图片压缩 Worker（类似 TinyPNG 的智能压缩）
+        self.onmessage = async function(e) {
           const { type, data } = e.data;
+          
           if (type === 'COMPRESS_IMAGE') {
-            // 压缩逻辑（简化版）
-            self.postMessage({
-              type: 'SCREENSHOT_RESULT',
-              data: { compressed: { dataUrl: data.dataUrl } }
-            });
+            try {
+              const { dataUrl, maxWidth, maxHeight, quality, outputFormat } = data;
+              
+              // 1. 加载图片
+              const img = await loadImage(dataUrl);
+              
+              // 获取图片尺寸（ImageBitmap 或 Image 都支持）
+              const imgWidth = img.width || img.naturalWidth || 0;
+              const imgHeight = img.height || img.naturalHeight || 0;
+              
+              if (imgWidth === 0 || imgHeight === 0) {
+                throw new Error('无法获取图片尺寸');
+              }
+              
+              // 2. 计算压缩后的尺寸（保持宽高比）
+              const { width, height } = calculateSize(
+                imgWidth,
+                imgHeight,
+                maxWidth || 1600,
+                maxHeight || 900
+              );
+              
+              // 3. 创建 OffscreenCanvas（Worker 中必须使用 OffscreenCanvas）
+              if (typeof OffscreenCanvas === 'undefined') {
+                throw new Error('浏览器不支持 OffscreenCanvas，无法在 Worker 中压缩');
+              }
+              
+              const canvas = new OffscreenCanvas(width, height);
+              const ctx = canvas.getContext('2d');
+              
+              if (!ctx) {
+                throw new Error('无法获取 Canvas 上下文');
+              }
+              
+              // 4. 优化绘制设置（提升压缩质量）
+              ctx.imageSmoothingEnabled = true;
+              ctx.imageSmoothingQuality = 'high';
+              
+              // 5. 使用白色背景（避免透明区域压缩问题）
+              ctx.fillStyle = '#ffffff';
+              ctx.fillRect(0, 0, width, height);
+              
+              // 6. 绘制图片（高质量缩放）
+              ctx.drawImage(img, 0, 0, width, height);
+              
+              // 7. 转换为目标格式（智能质量调整）
+              // OffscreenCanvas 使用 convertToBlob 而不是 toDataURL
+              let compressedDataUrl;
+              const finalQuality = Math.max(0.1, Math.min(0.95, quality || 0.15));
+              
+              // 辅助函数：将 Blob 转换为 data URL
+              async function blobToDataURL(blob) {
+                return new Promise((resolve, reject) => {
+                  const reader = new FileReader();
+                  reader.onload = () => resolve(reader.result);
+                  reader.onerror = reject;
+                  reader.readAsDataURL(blob);
+                });
+              }
+              
+              // 确定 MIME 类型
+              let mimeType = 'image/png';
+              if (outputFormat === 'webp') {
+                mimeType = 'image/webp';
+              } else if (outputFormat === 'jpeg') {
+                mimeType = 'image/jpeg';
+              }
+              
+              // 第一次压缩
+              let blob = await canvas.convertToBlob({
+                type: mimeType,
+                quality: finalQuality
+              });
+              
+              compressedDataUrl = await blobToDataURL(blob);
+              
+              // 8. 如果压缩后文件仍然较大，尝试进一步降低质量
+              const originalSize = dataUrl.length;
+              let compressedSize = compressedDataUrl.length;
+              
+              // 如果压缩后大小减少不足 20%，尝试更激进的压缩
+              if (compressedSize > originalSize * 0.8 && finalQuality > 0.1 && (outputFormat === 'webp' || outputFormat === 'jpeg')) {
+                const aggressiveQuality = Math.max(0.1, finalQuality * 0.7);
+                
+                try {
+                  const moreCompressedBlob = await canvas.convertToBlob({
+                    type: mimeType,
+                    quality: aggressiveQuality
+                  });
+                  
+                  const moreCompressedDataUrl = await blobToDataURL(moreCompressedBlob);
+                  
+                  // 如果更激进的压缩效果更好，使用它
+                  if (moreCompressedDataUrl.length < compressedDataUrl.length) {
+                    compressedDataUrl = moreCompressedDataUrl;
+                    compressedSize = compressedDataUrl.length;
+                  }
+                } catch (e) {
+                  // 忽略错误，使用之前的压缩结果
+                }
+              }
+              
+              // 9. 返回压缩结果
+              self.postMessage({
+                type: 'SCREENSHOT_RESULT',
+                data: {
+                  compressed: {
+                    dataUrl: compressedDataUrl,
+                    originalSize: originalSize,
+                    compressedSize: compressedDataUrl.length,
+                    compressionRatio: ((1 - compressedDataUrl.length / originalSize) * 100).toFixed(1)
+                  }
+                }
+              });
+            } catch (error) {
+              // 压缩失败，返回原始数据
+              self.postMessage({
+                type: 'SCREENSHOT_RESULT',
+                data: {
+                  compressed: {
+                    dataUrl: data.dataUrl,
+                    error: error.message
+                  }
+                }
+              });
+            }
           }
         };
+        
+        // 加载图片的辅助函数（Worker 中使用 createImageBitmap）
+        async function loadImage(dataUrl) {
+          try {
+            // 将 data URL 转换为 Blob
+            let blob;
+            if (typeof fetch !== 'undefined') {
+              try {
+                const response = await fetch(dataUrl);
+                blob = await response.blob();
+              } catch (e) {
+                // fetch 失败，手动转换 data URL 到 Blob
+                blob = dataURLToBlob(dataUrl);
+              }
+            } else {
+              // 没有 fetch，手动转换
+              blob = dataURLToBlob(dataUrl);
+            }
+            
+            // 使用 createImageBitmap 创建图片（Worker 中推荐方式）
+            if (typeof createImageBitmap !== 'undefined') {
+              return await createImageBitmap(blob);
+            } else {
+              // 回退方案：使用 Image（某些 Worker 环境可能支持）
+              return new Promise((resolve, reject) => {
+                const img = new Image();
+                img.onload = () => resolve(img);
+                img.onerror = reject;
+                img.src = dataUrl;
+              });
+            }
+          } catch (error) {
+            // 如果 createImageBitmap 失败，尝试直接使用 Image
+            return new Promise((resolve, reject) => {
+              const img = new Image();
+              img.onload = () => resolve(img);
+              img.onerror = () => reject(error);
+              img.src = dataUrl;
+            });
+          }
+        }
+        
+        // 将 data URL 转换为 Blob 的辅助函数
+        function dataURLToBlob(dataUrl) {
+          const arr = dataUrl.split(',');
+          const mimeMatch = arr[0].match(/:(.*?);/);
+          const mime = mimeMatch ? mimeMatch[1] : 'image/png';
+          const bstr = atob(arr[1]);
+          let n = bstr.length;
+          const u8arr = new Uint8Array(n);
+          while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+          }
+          return new Blob([u8arr], { type: mime });
+        }
+        
+        // 计算压缩后尺寸的辅助函数（保持宽高比）
+        function calculateSize(originalWidth, originalHeight, maxWidth, maxHeight) {
+          let width = originalWidth;
+          let height = originalHeight;
+          
+          if (width > maxWidth || height > maxHeight) {
+            const widthRatio = maxWidth / width;
+            const heightRatio = maxHeight / height;
+            const ratio = Math.min(widthRatio, heightRatio);
+            width = Math.round(width * ratio);
+            height = Math.round(height * ratio);
+          }
+          
+          return { width, height };
+        }
       `;
             const blob = new Blob([workerCode], { type: 'application/javascript' });
             const workerUrl = URL.createObjectURL(blob);
@@ -16719,17 +16929,34 @@ class ScreenshotManager {
             newWorker.onmessage = (e) => {
                 const { type, data } = e.data;
                 if (type === 'SCREENSHOT_RESULT' && data?.compressed) {
+                    const compressed = data.compressed;
+                    // 更新截图历史记录
                     if (this.screenshotHistory.length > 0) {
-                        this.screenshotHistory[this.screenshotHistory.length - 1] = data.compressed.dataUrl;
+                        this.screenshotHistory[this.screenshotHistory.length - 1] = compressed.dataUrl;
+                        // 打印压缩统计信息
+                        if (!this.options.silentMode && compressed.originalSize && compressed.compressedSize) {
+                            const originalKB = (compressed.originalSize * 0.75 / 1024).toFixed(2);
+                            const compressedKB = (compressed.compressedSize * 0.75 / 1024).toFixed(2);
+                            const ratio = compressed.compressionRatio || '0';
+                            console.log('📸 [Worker 压缩] ✅ 压缩完成');
+                            console.log(`  原始大小: ${originalKB} KB`);
+                            console.log(`  压缩后: ${compressedKB} KB`);
+                            console.log(`  压缩率: ${ratio}%`);
+                            if (compressed.error) {
+                                console.warn(`  ⚠️ 压缩警告: ${compressed.error}`);
+                            }
+                        }
                     }
                 }
             };
             newWorker.onerror = (e) => {
                 console.error('📸 WebWorker 错误:', e);
+                if (!this.options.silentMode) {
+                    console.warn('📸 Worker 压缩失败，使用原始截图');
+                }
             };
             // 注意：不要立即 revokeObjectURL，因为 Worker 需要这个 URL 保持有效
             // 在 destroy() 方法中清理 Worker 时再 revoke
-            // URL.revokeObjectURL(workerUrl) // 已移除，在 destroy 时清理
             return newWorker;
         }
         catch (err) {
@@ -16807,7 +17034,7 @@ class ScreenshotManager {
         const encoder = new TextEncoder();
         let offset = 0;
         // sign: 8字节 (BigInt64)
-        view.setBigInt64(offset, BigInt(config.sign), true); // little-endian
+        view.setBigInt64(offset, BigInt(config.sign));
         offset += 8;
         // type: 1字节 (Uint8)
         view.setUint8(offset, config.type);