customer-chat-sdk 1.0.38 → 1.0.40

package/dist/customer-sdk.esm.js

@@ -2468,12 +2468,24 @@ async function domToDataUrl(node, options) {
   return dataUrl;
 }
 
+async function domToJpeg(node, options) {
+  return domToDataUrl(
+    await orCreateContext(node, { ...options, type: "image/jpeg" })
+  );
+}
+
 async function domToPng(node, options) {
   return domToDataUrl(
     await orCreateContext(node, { ...options, type: "image/png" })
   );
 }
 
+async function domToWebp(node, options) {
+  return domToDataUrl(
+    await orCreateContext(node, { ...options, type: "image/webp" })
+  );
+}
+
 /*
 * snapdom
 * v.1.9.14
@@ -14307,6 +14319,8 @@ class ScreenshotManager {
         this.screenshotTimer = null;
         // modern-screenshot Worker 上下文（用于复用，避免频繁创建和销毁）
         this.screenshotContext = null;
+        // 截图锁，防止并发截图
+        this.isScreenshotInProgress = false;
         // PostMessage 监听器
         this.messageHandler = null;
         // 动态轮询间隔（由 iframe 消息控制）
@@ -14332,7 +14346,7 @@ class ScreenshotManager {
         this.globalRejectionHandler = null;
         this.targetElement = targetElement;
         this.options = {
-            interval: options.interval ?? 5000,
+            interval: options.interval ?? 1000,
             quality: options.quality ?? 0.3, // 降低默认质量：0.4 -> 0.3，减少 base64 大小
             scale: options.scale ?? 1,
             maxHistory: options.maxHistory ?? 10,
@@ -14941,16 +14955,22 @@ class ScreenshotManager {
             console.log('📸 使用 html2canvas 引擎截图...');
         }
         try {
+            // 检测 iOS 设备
+            const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
             // html2canvas 需要确保样式完全加载，额外等待
-            // 等待所有样式表加载完成
+            // iOS 设备需要更长的等待时间，因为样式表加载和处理方式不同
             await this.waitForAllStylesLoaded();
             // 等待字体加载完成
             await this.waitForFonts();
+            // iOS 设备需要额外的等待时间，确保样式完全应用
+            if (isIOS) {
+                await new Promise(resolve => setTimeout(resolve, 300)); // iOS 额外等待 300ms
+            }
             // 等待 DOM 完全渲染
             await new Promise(resolve => {
                 requestAnimationFrame(() => {
                     requestAnimationFrame(() => {
-                        setTimeout(() => resolve(), 100);
+                        setTimeout(() => resolve(), isIOS ? 200 : 100); // iOS 使用更长的等待时间
                     });
                 });
             });
@@ -14986,9 +15006,11 @@ class ScreenshotManager {
                 // width: finalWidth,  // ❌ 移除，会导致宽度不正确
                 // height: finalHeight, // ❌ 移除，会导致高度不正确
                 // 关键配置：确保样式正确渲染
-                // 注意：不要设置 foreignObjectRendering，让 html2canvas 自动选择最佳渲染方式
-                // foreignObjectRendering 可能导致样式问题，所以不设置它
-                onclone: (clonedDoc, _clonedElement) => {
+                // iOS 特定配置：启用 foreignObjectRendering 以确保样式正确渲染
+                // iOS Safari 和 Chrome 对样式表的处理方式不同，需要启用此选项
+                onclone: (clonedDoc, clonedElement) => {
+                    // 检测 iOS 设备（需要在 onclone 内部检测，因为这是回调函数）
+                    const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
                     // 在克隆的文档中，确保所有样式都正确应用
                     // html2canvas 会自动处理样式，但我们需要确保样式表被正确复制
                     // 确保 clonedDoc.head 存在
@@ -15077,10 +15099,53 @@ class ScreenshotManager {
                     catch (e) {
                         // 忽略错误，继续执行
                     }
+                    // 4. iOS 特定处理：将计算后的样式内联化（确保样式正确应用）
+                    // iOS Safari/Chrome 对样式表的处理方式不同，需要将计算后的样式内联化
+                    if (isIOS) {
+                        try {
+                            // 遍历克隆文档中的所有元素，将计算后的样式内联化
+                            const allElements = clonedElement.querySelectorAll('*');
+                            allElements.forEach((el) => {
+                                try {
+                                    const htmlEl = el;
+                                    const computedStyle = window.getComputedStyle(htmlEl);
+                                    // 获取关键样式属性并内联化
+                                    const importantStyles = [];
+                                    // 获取所有样式属性（iOS 需要更完整的样式）
+                                    for (let i = 0; i < computedStyle.length; i++) {
+                                        const prop = computedStyle[i];
+                                        const value = computedStyle.getPropertyValue(prop);
+                                        const priority = computedStyle.getPropertyPriority(prop);
+                                        // 只内联化非默认值的重要样式
+                                        if (value && value !== 'none' && value !== 'auto' && value !== 'normal') {
+                                            importantStyles.push(`${prop}: ${value}${priority === 'important' ? ' !important' : ''}`);
+                                        }
+                                    }
+                                    // 如果有关键样式，添加到内联样式
+                                    if (importantStyles.length > 0) {
+                                        const currentStyle = htmlEl.getAttribute('style') || '';
+                                        const newStyle = currentStyle
+                                            ? `${currentStyle}; ${importantStyles.join('; ')}`
+                                            : importantStyles.join('; ');
+                                        htmlEl.setAttribute('style', newStyle);
+                                    }
+                                }
+                                catch (e) {
+                                    // 忽略单个元素的错误
+                                }
+                            });
+                        }
+                        catch (e) {
+                            // 忽略内联化错误
+                            if (!this.options.silentMode) {
+                                console.warn('📸 iOS 样式内联化失败:', e);
+                            }
+                        }
+                    }
                     if (!this.options.silentMode) {
                         const styleLinks = clonedDoc.querySelectorAll('link[rel="stylesheet"]').length;
                         const styleTags = clonedDoc.querySelectorAll('style').length;
-                        console.log(`📸 onclone: 已复制 ${styleLinks} 个样式表链接和 ${styleTags} 个内联样式标签`);
+                        console.log(`📸 onclone: 已复制 ${styleLinks} 个样式表链接和 ${styleTags} 个内联样式标签${isIOS ? ' (iOS 模式：已内联化计算样式)' : ''}`);
                     }
                 },
                 // 性能优化
@@ -15206,387 +15271,413 @@ class ScreenshotManager {
      * - 页面资源较少
      */
     async takeScreenshotWithModernScreenshot(element) {
+        // 检查是否有截图正在进行（防止并发冲突）
+        if (this.isScreenshotInProgress) {
+            throw new Error('截图正在进行中，请稍后再试');
+        }
+        this.isScreenshotInProgress = true;
         if (!this.options.silentMode) {
             console.log('📸 使用 modern-screenshot 引擎截图（Worker 模式）...');
         }
-        // 获取元素的实际尺寸（使用 scrollWidth/scrollHeight 获取完整内容尺寸）
-        // 对于 document.body，需要特殊处理，确保截取完整页面内容
-        let elementWidth;
-        let elementHeight;
-        if (element === document.body || element === document.documentElement) {
-            // 对于 body 或 html 元素，使用页面的完整尺寸（包括滚动内容）
-            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);
-        }
-        else {
-            // 对于其他元素，使用元素的完整尺寸
-            elementWidth = element.scrollWidth || element.clientWidth || element.offsetWidth;
-            elementHeight = element.scrollHeight || element.clientHeight || element.offsetHeight;
-        }
-        if (!this.options.silentMode) {
-            console.log(`📸 目标元素: ${element.tagName}${element.id ? '#' + element.id : ''}${element.className ? '.' + element.className.split(' ').join('.') : ''}`);
-            console.log(`📸 元素尺寸: ${elementWidth}x${elementHeight}`);
-            console.log(`📸 scrollWidth: ${element.scrollWidth}, scrollHeight: ${element.scrollHeight}`);
-            console.log(`📸 clientWidth: ${element.clientWidth}, clientHeight: ${element.clientHeight}`);
-            console.log(`📸 offsetWidth: ${element.offsetWidth}, offsetHeight: ${element.offsetHeight}`);
+        try {
+            // 获取元素的实际尺寸（使用 scrollWidth/scrollHeight 获取完整内容尺寸）
+            // 对于 document.body，需要特殊处理，确保截取完整页面内容
+            let elementWidth;
+            let elementHeight;
             if (element === document.body || element === document.documentElement) {
-                console.log(`📸 页面完整尺寸: ${document.documentElement.scrollWidth}x${document.documentElement.scrollHeight}`);
-                console.log(`📸 窗口尺寸: ${window.innerWidth}x${window.innerHeight}`);
-            }
-        }
-        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-        const isLowEndDevice = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;
-        // 进一步降低质量以减少 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);
-        // 对于所有元素都应用尺寸限制（包括 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，直接返回
-            if (url.startsWith('data:') || url.startsWith('blob:')) {
-                return url;
+                // 对于 body 或 html 元素，使用页面的完整尺寸（包括滚动内容）
+                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);
             }
-            // 如果是同源图片，直接返回
-            try {
-                const imgUrl = new URL(url, window.location.href);
-                if (imgUrl.origin === window.location.origin) {
-                    return url;
-                }
+            else {
+                // 对于其他元素，使用元素的完整尺寸
+                elementWidth = element.scrollWidth || element.clientWidth || element.offsetWidth;
+                elementHeight = element.scrollHeight || element.clientHeight || element.offsetHeight;
             }
-            catch (e) {
-                // URL 解析失败，继续处理
+            if (!this.options.silentMode) {
+                console.log(`📸 目标元素: ${element.tagName}${element.id ? '#' + element.id : ''}${element.className ? '.' + element.className.split(' ').join('.') : ''}`);
+                console.log(`📸 元素尺寸: ${elementWidth}x${elementHeight}`);
+                console.log(`📸 scrollWidth: ${element.scrollWidth}, scrollHeight: ${element.scrollHeight}`);
+                console.log(`📸 clientWidth: ${element.clientWidth}, clientHeight: ${element.clientHeight}`);
+                console.log(`📸 offsetWidth: ${element.offsetWidth}, offsetHeight: ${element.offsetHeight}`);
+                if (element === document.body || element === document.documentElement) {
+                    console.log(`📸 页面完整尺寸: ${document.documentElement.scrollWidth}x${document.documentElement.scrollHeight}`);
+                    console.log(`📸 窗口尺寸: ${window.innerWidth}x${window.innerHeight}`);
+                }
             }
-            // 如果配置了代理服务器，使用代理处理跨域图片
-            // 只有当 useProxy 为 true 且 proxyUrl 存在时才使用代理
-            const shouldUseProxy = this.options.useProxy && this.options.proxyUrl && this.options.proxyUrl.trim() !== '';
-            if (shouldUseProxy) {
-                // 检查内存缓存（优先使用缓存，带过期时间检查）
-                const cachedDataUrl = this.getCachedImage(url);
-                if (cachedDataUrl) {
-                    if (!this.options.silentMode) {
-                        console.log(`📸 ✅ 使用内存缓存图片: ${url.substring(0, 50)}...`);
+            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+            const isLowEndDevice = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;
+            // 进一步降低质量以减少 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);
+            // 对于所有元素都应用尺寸限制（包括 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，直接返回
+                if (url.startsWith('data:') || url.startsWith('blob:')) {
+                    return url;
+                }
+                // 如果是同源图片，直接返回
+                try {
+                    const imgUrl = new URL(url, window.location.href);
+                    if (imgUrl.origin === window.location.origin) {
+                        return url;
                     }
-                    return cachedDataUrl;
                 }
-                // 检查 IndexedDB 缓存（如果启用）
-                if (this.options.useIndexedDB) {
-                    const indexedDBCache = await this.getIndexedDBCache(url);
-                    if (indexedDBCache) {
-                        // 同步到内存缓存
-                        this.setCachedImage(url, indexedDBCache);
+                catch (e) {
+                    // URL 解析失败，继续处理
+                }
+                // 如果配置了代理服务器，使用代理处理跨域图片
+                // 只有当 useProxy 为 true 且 proxyUrl 存在时才使用代理
+                const shouldUseProxy = this.options.useProxy && this.options.proxyUrl && this.options.proxyUrl.trim() !== '';
+                if (shouldUseProxy) {
+                    // 检查内存缓存（优先使用缓存，带过期时间检查）
+                    const cachedDataUrl = this.getCachedImage(url);
+                    if (cachedDataUrl) {
                         if (!this.options.silentMode) {
-                            console.log(`📸 ✅ 使用 IndexedDB 缓存图片: ${url.substring(0, 50)}...`);
+                            console.log(`📸 ✅ 使用内存缓存图片: ${url.substring(0, 50)}...`);
                         }
-                        return indexedDBCache;
+                        return cachedDataUrl;
                     }
-                }
-                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 controller = new AbortController();
-                    const timeoutId = setTimeout(() => controller.abort(), this.options.imageLoadTimeout);
-                    try {
-                        const fetchOptions = {
-                            method: 'GET',
-                            mode: 'cors',
-                            credentials: 'omit',
-                            headers: {
-                                'Accept': 'image/*'
-                            },
-                            cache: 'no-cache',
-                            signal: controller.signal
-                        };
-                        // 添加 fetch priority（如果支持）
-                        if ('priority' in fetchOptions) {
-                            fetchOptions.priority = this.options.fetchPriority;
+                    // 检查 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;
                         }
-                        const response = await fetch(proxyUrl, fetchOptions);
-                        clearTimeout(timeoutId);
-                        if (!response.ok) {
-                            throw new Error(`代理请求失败: ${response.status}`);
+                    }
+                    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 controller = new AbortController();
+                        const timeoutId = setTimeout(() => controller.abort(), this.options.imageLoadTimeout);
+                        try {
+                            const fetchOptions = {
+                                method: 'GET',
+                                mode: 'cors',
+                                credentials: 'omit',
+                                headers: {
+                                    'Accept': 'image/*'
+                                },
+                                cache: 'no-cache',
+                                signal: controller.signal
+                            };
+                            // 添加 fetch priority（如果支持）
+                            if ('priority' in fetchOptions) {
+                                fetchOptions.priority = this.options.fetchPriority;
+                            }
+                            const response = await fetch(proxyUrl, fetchOptions);
+                            clearTimeout(timeoutId);
+                            if (!response.ok) {
+                                throw new Error(`代理请求失败: ${response.status}`);
+                            }
+                            const blob = await response.blob();
+                            const dataUrl = await this.blobToDataUrl(blob);
+                            // 缓存结果（带时间戳，10分钟有效）
+                            this.setCachedImage(url, dataUrl);
+                            // 如果启用 IndexedDB，也保存到 IndexedDB
+                            if (this.options.useIndexedDB) {
+                                await this.setIndexedDBCache(url, dataUrl);
+                            }
+                            return dataUrl;
                         }
-                        const blob = await response.blob();
-                        const dataUrl = await this.blobToDataUrl(blob);
-                        // 缓存结果（带时间戳，10分钟有效）
-                        this.setCachedImage(url, dataUrl);
-                        // 如果启用 IndexedDB，也保存到 IndexedDB
-                        if (this.options.useIndexedDB) {
-                            await this.setIndexedDBCache(url, dataUrl);
+                        catch (fetchError) {
+                            clearTimeout(timeoutId);
+                            throw fetchError;
                         }
-                        return dataUrl;
                     }
-                    catch (fetchError) {
-                        clearTimeout(timeoutId);
-                        throw fetchError;
+                    catch (error) {
+                        if (!this.options.silentMode) {
+                            console.warn(`📸 代理处理图片失败: ${url.substring(0, 100)}...`, error);
+                        }
+                        // 失败时返回原 URL
+                        return url;
                     }
                 }
-                catch (error) {
-                    if (!this.options.silentMode) {
-                        console.warn(`📸 代理处理图片失败: ${url.substring(0, 100)}...`, error);
+                // 如果没有配置代理，需要添加内存保护机制
+                // 不使用代理时，modern-screenshot 会直接下载图片，可能导致内存问题
+                // 由于已配置 CORS，可以直接下载并检查大小
+                if (this.options.enableCORS) {
+                    // 对于不使用代理的情况，添加内存保护和缓存机制：
+                    // 1. 先检查内存缓存（避免重复下载）
+                    // 2. 检查 IndexedDB 缓存
+                    // 3. 使用下载队列避免并发重复下载
+                    // 4. 下载时检查大小，如果过大则使用占位符
+                    // 先检查内存缓存（优先使用缓存，避免重复下载）
+                    const cachedDataUrl = this.getCachedImage(url);
+                    if (cachedDataUrl) {
+                        if (!this.options.silentMode) {
+                            console.log(`📸 ✅ 使用内存缓存图片（无代理模式）: ${url.substring(0, 50)}...`);
+                        }
+                        return cachedDataUrl;
                     }
-                    // 失败时返回原 URL
-                    return url;
-                }
-            }
-            // 如果没有配置代理，需要添加内存保护机制
-            // 不使用代理时，modern-screenshot 会直接下载图片，可能导致内存问题
-            // 由于已配置 CORS，可以直接下载并检查大小
-            if (this.options.enableCORS) {
-                // 对于不使用代理的情况，添加内存保护和缓存机制：
-                // 1. 先检查内存缓存（避免重复下载）
-                // 2. 检查 IndexedDB 缓存
-                // 3. 使用下载队列避免并发重复下载
-                // 4. 下载时检查大小，如果过大则使用占位符
-                // 先检查内存缓存（优先使用缓存，避免重复下载）
-                const cachedDataUrl = this.getCachedImage(url);
-                if (cachedDataUrl) {
-                    if (!this.options.silentMode) {
-                        console.log(`📸 ✅ 使用内存缓存图片（无代理模式）: ${url.substring(0, 50)}...`);
+                    // 检查 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;
+                        }
                     }
-                    return cachedDataUrl;
-                }
-                // 检查 IndexedDB 缓存（如果启用）
-                if (this.options.useIndexedDB) {
-                    const indexedDBCache = await this.getIndexedDBCache(url);
-                    if (indexedDBCache) {
-                        // 同步到内存缓存
-                        this.setCachedImage(url, indexedDBCache);
+                    // 检查是否正在下载（避免重复下载）
+                    if (this.imageDownloadQueue.has(url)) {
+                        // 如果已经在下载队列中，等待现有下载完成
                         if (!this.options.silentMode) {
-                            console.log(`📸 ✅ 使用 IndexedDB 缓存图片（无代理模式）: ${url.substring(0, 50)}...`);
+                            console.log(`📸 ⏳ 等待图片下载完成: ${url.substring(0, 50)}...`);
                         }
-                        return indexedDBCache;
+                        return await this.imageDownloadQueue.get(url);
                     }
-                }
-                // 检查是否正在下载（避免重复下载）
-                if (this.imageDownloadQueue.has(url)) {
-                    // 如果已经在下载队列中，等待现有下载完成
-                    if (!this.options.silentMode) {
-                        console.log(`📸 ⏳ 等待图片下载完成: ${url.substring(0, 50)}...`);
+                    // 检查并发下载数限制
+                    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;
                     }
-                    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)}...`);
+                    // 创建下载 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);
                     }
-                    return url;
                 }
-                // 创建下载 Promise 并加入队列
-                const downloadPromise = this.downloadImageWithoutProxy(url);
-                this.imageDownloadQueue.set(url, downloadPromise);
-                this.activeDownloads.add(url);
+                // 默认返回原 URL
+                return url;
+            };
+            // 检查元素是否可见且有尺寸
+            const rect = element.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) {
+                throw new Error('元素尺寸为 0，无法截图');
+            }
+            // 每次截图都重新创建 context，确保使用最新的元素状态
+            // 如果已有 context，先清理
+            if (this.screenshotContext) {
                 try {
-                    const result = await downloadPromise;
-                    return result;
+                    destroyContext(this.screenshotContext);
                 }
-                finally {
-                    // 下载完成后清理
-                    this.imageDownloadQueue.delete(url);
-                    this.activeDownloads.delete(url);
+                catch (e) {
+                    // 忽略清理错误
                 }
-            }
-            // 默认返回原 URL
-            return url;
-        };
-        // 检查元素是否可见且有尺寸
-        const rect = element.getBoundingClientRect();
-        if (rect.width === 0 || rect.height === 0) {
-            throw new Error('元素尺寸为 0，无法截图');
-        }
-        // 每次截图都重新创建 context，确保使用最新的元素状态
-        // 如果已有 context，先清理
-        if (this.screenshotContext) {
-            try {
-                destroyContext(this.screenshotContext);
-            }
-            catch (e) {
-                // 忽略清理错误
-            }
-            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, // Worker 数量，> 0 启用 Worker 模式
-            quality: finalQuality, // 图片质量（0-1），已优化为更低的值以减少 base64 大小
-            fetchFn: handleCrossOriginImage, // 使用代理服务器处理跨域图片
-            fetch: {
-                requestInit: {
-                    cache: 'no-cache',
+                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, // Worker 数量，> 0 启用 Worker 模式
+                quality: finalQuality, // 图片质量（0-1），已优化为更低的值以减少 base64 大小
+                fetchFn: handleCrossOriginImage, // 使用代理服务器处理跨域图片
+                fetch: {
+                    requestInit: {
+                        cache: 'no-cache',
+                    },
+                    bypassingCache: true,
                 },
-                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），避免截图过大
-        // 这样可以减少 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}`);
+                // 设置最大 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），避免截图过大
+            // 这样可以减少 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 {
+                        console.log(`📸 使用压缩尺寸: ${finalWidth}x${finalHeight}`);
+                    }
                 }
-                else {
-                    console.log(`📸 使用压缩尺寸: ${finalWidth}x${finalHeight}`);
+            }
+            else {
+                if (!this.options.silentMode) {
+                    console.log(`📸 使用元素实际尺寸: ${elementWidth}x${elementHeight}`);
                 }
             }
-        }
-        else {
+            // 缩放配置：移动设备使用更低的缩放比例，进一步减少图片大小
+            // scale < 1 会降低图片分辨率，减少 base64 大小
+            if (this.options.scale !== 1) {
+                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，不需要手动设置 workerUrl
+            // 当 workerNumber > 0 时，截图处理会在 Worker 线程中执行，不会阻塞主线程 UI
+            // 创建 Worker 上下文（每次截图都创建新的，确保元素状态最新）
             if (!this.options.silentMode) {
-                console.log(`📸 使用元素实际尺寸: ${elementWidth}x${elementHeight}`);
+                console.log(`📸 Worker 模式: ${workerNumber} 个 Worker，质量: ${finalQuality.toFixed(2)}，缩放: ${contextOptions.scale || 1}`);
             }
-        }
-        // 缩放配置：移动设备使用更低的缩放比例，进一步减少图片大小
-        // scale < 1 会降低图片分辨率，减少 base64 大小
-        if (this.options.scale !== 1) {
-            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，不需要手动设置 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 上下文进行截图
-            const dataUrl = await domToPng(this.screenshotContext);
-            // 验证截图结果
-            if (!dataUrl || dataUrl.length < 100) {
-                throw new Error('生成的截图数据无效或过短');
+            // 添加重试机制
+            let retries = 0;
+            const maxRetries = this.options.maxRetries || 2;
+            let screenshotContext = null;
+            while (retries <= maxRetries) {
+                try {
+                    screenshotContext = await createContext$1(element, contextOptions);
+                    this.screenshotContext = screenshotContext;
+                    break;
+                }
+                catch (error) {
+                    if (retries === maxRetries) {
+                        throw new Error(`创建截图上下文失败（已重试 ${maxRetries} 次）: ${error instanceof Error ? error.message : String(error)}`);
+                    }
+                    retries++;
+                    const delay = 1000 * retries; // 递增延迟：1秒、2秒...
+                    if (!this.options.silentMode) {
+                        console.warn(`📸 ⚠️ 创建截图上下文失败，${delay}ms 后重试 (${retries}/${maxRetries})...`);
+                    }
+                    await new Promise(resolve => setTimeout(resolve, delay));
+                }
             }
-            // 根据输出格式转换
-            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');
+            try {
+                // 根据输出格式选择对应的 API，避免格式转换（性能优化）
+                // 添加超时机制，防止卡住（30秒超时）
+                const timeoutMs = 30000; // 30秒超时
+                const timeoutPromise = new Promise((_, reject) => {
+                    setTimeout(() => {
+                        reject(new Error(`截图超时（${timeoutMs}ms），可能页面过大或 Worker 处理时间过长`));
+                    }, timeoutMs);
+                });
+                let dataUrl;
+                const outputFormat = this.options.outputFormat || 'webp';
+                if (!this.options.silentMode) {
+                    console.log(`📸 使用 ${outputFormat.toUpperCase()} 格式截图（直接输出，无需转换）...`);
                 }
-                const img = new Image();
-                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;
+                // 根据输出格式选择对应的 API
+                if (outputFormat === 'webp') {
+                    // 使用 domToWebp，直接输出 WebP 格式，无需转换
+                    dataUrl = await Promise.race([
+                        domToWebp(this.screenshotContext),
+                        timeoutPromise
+                    ]);
+                }
+                else if (outputFormat === 'jpeg') {
+                    // 使用 domToJpeg，直接输出 JPEG 格式，无需转换
+                    dataUrl = await Promise.race([
+                        domToJpeg(this.screenshotContext),
+                        timeoutPromise
+                    ]);
+                }
+                else {
+                    // 默认使用 domToPng
+                    dataUrl = await Promise.race([
+                        domToPng(this.screenshotContext),
+                        timeoutPromise
+                    ]);
+                }
+                // 验证截图结果
+                if (!dataUrl || dataUrl.length < 100) {
+                    throw new Error('生成的截图数据无效或过短');
+                }
+                if (!this.options.silentMode) {
+                    console.log(`📸 ✅ modern-screenshot 截图成功（${outputFormat.toUpperCase()} 格式，直接输出，无需转换）`);
+                }
+                return dataUrl;
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                if (!this.options.silentMode) {
+                    console.error('📸 modern-screenshot 截图失败:', errorMessage);
+                    console.error('📸 元素信息:', {
+                        width: rect.width,
+                        height: rect.height,
+                        scrollWidth: element.scrollWidth,
+                        scrollHeight: element.scrollHeight,
+                        display: window.getComputedStyle(element).display,
+                        visibility: window.getComputedStyle(element).visibility
                     });
-                    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';
-                            }
+                }
+                throw error;
+            }
+            finally {
+                // 每次截图后立即清理 context，释放 Worker 和内存
+                // 这是防止内存泄漏的关键步骤
+                if (this.screenshotContext) {
+                    try {
+                        destroyContext(this.screenshotContext);
+                        if (!this.options.silentMode) {
+                            console.log('📸 ✅ modern-screenshot context 已清理');
                         }
-                        catch {
-                            mimeType = 'image/jpeg';
+                    }
+                    catch (e) {
+                        if (!this.options.silentMode) {
+                            console.warn('📸 ⚠️ 清理 context 失败:', e);
                         }
                     }
-                    // 使用优化后的质量进行格式转换
-                    convertedDataUrl = mimeType === 'image/png'
-                        ? canvas.toDataURL(mimeType)
-                        : canvas.toDataURL(mimeType, conversionQuality);
+                    finally {
+                        // 确保 context 引用被清除
+                        this.screenshotContext = null;
+                    }
                 }
-                finally {
-                    // 清理资源，释放内存
-                    img.src = ''; // 清除图片引用
-                    img.onload = null;
-                    img.onerror = null;
-                    canvas.width = 0; // 清空 canvas
-                    canvas.height = 0;
-                    ctx.clearRect(0, 0, 0, 0); // 清除绘制内容
+                // 释放截图锁
+                this.isScreenshotInProgress = false;
+                // 强制触发垃圾回收（如果可能）
+                // 注意：这需要浏览器支持，不是所有浏览器都有效
+                if (typeof window !== 'undefined' && window.gc && typeof window.gc === 'function') {
+                    try {
+                        window.gc();
+                    }
+                    catch {
+                        // 忽略 GC 错误
+                    }
                 }
-                return convertedDataUrl;
             }
-            return dataUrl;
         }
         catch (error) {
+            // 外层错误处理：确保即使发生错误也释放锁
             const errorMessage = error instanceof Error ? error.message : String(error);
             if (!this.options.silentMode) {
-                console.error('📸 modern-screenshot 截图失败:', errorMessage);
-                console.error('📸 元素信息:', {
-                    width: rect.width,
-                    height: rect.height,
-                    scrollWidth: element.scrollWidth,
-                    scrollHeight: element.scrollHeight,
-                    display: window.getComputedStyle(element).display,
-                    visibility: window.getComputedStyle(element).visibility
-                });
+                console.error('📸 modern-screenshot 截图异常:', errorMessage);
             }
             throw error;
         }
         finally {
-            // 每次截图后立即清理 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 错误
-                }
+            // 确保截图锁被释放（即使发生未捕获的错误）
+            if (this.isScreenshotInProgress) {
+                this.isScreenshotInProgress = false;
             }
         }
     }