customer-chat-sdk 1.0.71 → 1.0.73

package/dist/customer-sdk.esm.js

@@ -14318,11 +14318,6 @@ class ScreenshotManager {
         this.screenshotTimer = null;
         // modern-screenshot Worker 上下文（用于复用，避免频繁创建和销毁）
         this.screenshotContext = null;
-        this.contextElement = null; // 当前 context 对应的元素
-        this.contextOptionsHash = ''; // context 配置的哈希值，用于判断是否需要重新创建
-        this.contextContentHash = ''; // DOM 内容哈希值，用于检测内容变化
-        this.contextLastUpdateTime = 0; // context 最后更新时间
-        this.contextMaxAge = 5000; // context 最大存活时间（5秒），超过后强制刷新（缩短到5秒，确保内容及时更新）
         // 截图锁，防止并发截图
         this.isScreenshotInProgress = false;
         // 截图队列（用于处理频繁的截图请求）
@@ -14380,7 +14375,10 @@ class ScreenshotManager {
             fetchPriority: options.fetchPriority ?? 'high', // 默认高优先级
             maxImageSize: options.maxImageSize ?? 5, // 不使用代理时，单个图片最大尺寸（MB），默认5MB
             skipLargeImages: options.skipLargeImages ?? true, // 不使用代理时，是否跳过过大的图片，默认true（跳过）
-            workerNumber: options.workerNumber ?? undefined // modern-screenshot Worker 数量，默认自动计算（undefined 表示自动）
+            workerNumber: options.workerNumber ?? undefined, // modern-screenshot Worker 数量，默认自动计算（undefined 表示自动）
+            workerUrl: options.workerUrl ?? undefined, // modern-screenshot Worker URL，默认自动
+            drawImageInterval: options.drawImageInterval ?? 20, // modern-screenshot drawImageInterval，默认 20ms
+            backgroundColor: options.backgroundColor ?? '#ffffff', // modern-screenshot backgroundColor，默认 '#ffffff'
         };
         this.setupMessageListener();
         this.setupVisibilityChangeListener();
@@ -14418,82 +14416,10 @@ class ScreenshotManager {
                     // 忽略清理错误
                 }
                 this.screenshotContext = null;
-                this.contextElement = null;
-                this.contextOptionsHash = '';
-                this.contextContentHash = '';
-                this.contextLastUpdateTime = 0;
             }
         }
         this.targetElement = element;
     }
-    /**
-     * 计算 DOM 内容哈希（用于检测内容变化）
-     * 通过检测图片 URL、尺寸、文本内容等来判断内容是否变化
-     */
-    calculateContentHash(element) {
-        try {
-            // 收集关键内容信息
-            const contentInfo = {
-                // 收集所有图片 URL 和尺寸（用于检测图片变化）
-                // 只收集可见的图片，避免隐藏图片影响哈希
-                images: Array.from(element.querySelectorAll('img'))
-                    .filter(img => {
-                    const style = window.getComputedStyle(img);
-                    return style.display !== 'none' && style.visibility !== 'hidden';
-                })
-                    .map(img => ({
-                    src: img.src,
-                    currentSrc: img.currentSrc || img.src, // 使用 currentSrc 检测响应式图片变化
-                    naturalWidth: img.naturalWidth,
-                    naturalHeight: img.naturalHeight,
-                    complete: img.complete // 检测图片是否加载完成
-                })),
-                // 收集关键文本内容（前 500 个字符，减少计算量）
-                text: element.innerText?.substring(0, 500) || '',
-                // 收集关键元素的类名和 ID（用于检测结构变化）
-                // 只收集前 30 个，减少计算量
-                structure: Array.from(element.querySelectorAll('[class], [id]'))
-                    .slice(0, 30)
-                    .map(el => ({
-                    tag: el.tagName,
-                    class: el.className,
-                    id: el.id
-                })),
-                // 收集背景图片 URL（只收集前 10 个）
-                backgrounds: Array.from(element.querySelectorAll('[style*="background"]'))
-                    .slice(0, 10)
-                    .map(el => {
-                    try {
-                        const style = window.getComputedStyle(el);
-                        return {
-                            backgroundImage: style.backgroundImage,
-                            backgroundSize: style.backgroundSize
-                        };
-                    }
-                    catch {
-                        return null;
-                    }
-                })
-                    .filter(Boolean)
-            };
-            // 生成哈希值（简单的 JSON 字符串哈希）
-            const hashString = JSON.stringify(contentInfo);
-            // 使用简单的哈希算法（FNV-1a）
-            let hash = 2166136261;
-            for (let i = 0; i < hashString.length; i++) {
-                hash ^= hashString.charCodeAt(i);
-                hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
-            }
-            return hash.toString(36);
-        }
-        catch (error) {
-            // 如果计算失败，使用时间戳作为后备（强制刷新）
-            if (!this.options.silentMode) {
-                console.warn('📸 计算内容哈希失败，使用时间戳:', error);
-            }
-            return Date.now().toString();
-        }
-    }
     /**
      * 设置消息监听
      */
@@ -15619,22 +15545,10 @@ class ScreenshotManager {
                     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);
-            // 使用计算后的压缩尺寸（确保不超过 maxWidth/maxHeight）
-            // 对于 body 元素，已经使用了 window.innerWidth/innerHeight，所以直接使用压缩尺寸即可
-            const finalWidth = width;
-            const finalHeight = height;
-            // 处理跨域图片的函数
+            // 判断是否使用代理
+            const shouldUseProxy = this.options.useProxy && this.options.proxyUrl && this.options.proxyUrl.trim() !== '';
+            // 处理跨域图片的函数（仅在配置了代理时使用）
+            // 注意：这个函数只在 shouldUseProxy 为 true 时才会被传递给 modern-screenshot
             const handleCrossOriginImage = async (url) => {
                 // 如果是 data URL 或 blob URL，直接返回
                 if (url.startsWith('data:') || url.startsWith('blob:')) {
@@ -15650,76 +15564,68 @@ class ScreenshotManager {
                 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(`📸 ✅ 使用内存缓存图片: ${url.substring(0, 50)}...`);
-                        }
-                        return cachedDataUrl;
+                // 使用代理处理跨域图片
+                // 检查内存缓存（优先使用缓存，带过期时间检查）
+                const cachedDataUrl = this.getCachedImage(url);
+                if (cachedDataUrl) {
+                    if (!this.options.silentMode) {
+                        console.log(`📸 ✅ 使用内存缓存图片: ${url.substring(0, 50)}...`);
                     }
+                    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 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);
-                            return dataUrl;
+                        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;
                         }
-                        catch (fetchError) {
-                            clearTimeout(timeoutId);
-                            throw fetchError;
+                        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);
+                        return dataUrl;
                     }
-                    catch (error) {
-                        if (!this.options.silentMode) {
-                            console.warn(`📸 代理处理图片失败: ${url.substring(0, 100)}...`, error);
-                        }
-                        // 失败时返回原 URL
-                        return url;
+                    catch (fetchError) {
+                        clearTimeout(timeoutId);
+                        throw fetchError;
+                    }
+                }
+                catch (error) {
+                    if (!this.options.silentMode) {
+                        console.warn(`📸 代理处理图片失败: ${url.substring(0, 100)}...`, error);
                     }
+                    // 失败时返回原 URL，让 modern-screenshot 自己处理
+                    return url;
                 }
-                // 如果没有配置代理，直接返回原 URL，让 modern-screenshot 自己处理
-                // 不再主动下载图片，避免阻塞和耗时过长
-                // 如果 modern-screenshot 无法处理跨域图片，建议配置代理服务器
-                return url;
             };
             // 检查元素是否可见且有尺寸
             const rect = element.getBoundingClientRect();
@@ -15737,6 +15643,8 @@ class ScreenshotManager {
             else {
                 // 自动计算 workerNumber
                 const cpuCores = navigator.hardwareConcurrency || 4; // 默认假设 4 核
+                const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+                const isLowEndDevice = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;
                 if (isMobile || isLowEndDevice) {
                     // 移动设备/低端设备：使用 1 个 Worker（避免内存压力）
                     workerNumber = 1;
@@ -15758,279 +15666,86 @@ class ScreenshotManager {
             }
             // 限制 workerNumber 范围：1-8（避免过多 Worker 导致资源竞争）
             workerNumber = Math.max(1, Math.min(8, workerNumber));
-            // 构建 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,
-                },
-                // 设置最大 canvas 尺寸，防止生成过大的 canvas（避免内存问题）
-                // 参考: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
-                // 大多数浏览器限制为 16,777,216 像素（4096x4096），这里设置为更保守的值
-                maximumCanvasSize: 16777216, // 16M 像素（约 4096x4096）
-                // 使用 modern-screenshot 内置的 timeout（更可靠）
-                timeout: Math.max(this.options.interval * 6, 5000),
-            };
-            // 限制 timeout 最多 15 秒
-            contextOptions.timeout = Math.min(contextOptions.timeout, 15000);
-            // 如果用户指定了 workerUrl，使用指定的 URL
-            // 否则让 modern-screenshot 自动处理（它会尝试从 node_modules 或 CDN 加载）
-            // 注意：在某些构建工具（如 Rollup）中，可能需要手动指定 workerUrl
-            if (this.options.workerUrl) {
-                contextOptions.workerUrl = this.options.workerUrl;
+            // 按照 demo 的方式：只在 context 不存在时创建，之后一直复用
+            // 不进行复杂的检测和重新创建逻辑
+            if (!this.screenshotContext) {
                 if (!this.options.silentMode) {
-                    console.log(`📸 使用指定的 Worker URL: ${this.options.workerUrl}`);
+                    console.log(`📸 创建截图 Worker 上下文...`);
+                    console.log(`📸 Worker 模式: ${workerNumber} 个 Worker`);
                 }
-            }
-            else {
-                // 未指定 workerUrl 时，modern-screenshot 会自动处理
-                // 但在某些构建环境中可能需要手动指定，可以使用 CDN 作为后备
-                // 这里不设置 workerUrl，让 modern-screenshot 自己处理
-                if (!this.options.silentMode) {
-                    console.log('📸 Worker URL 未指定，modern-screenshot 将自动处理');
-                }
-            }
-            // 对所有元素都设置尺寸限制（包括 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 {
-                if (!this.options.silentMode) {
-                    console.log(`📸 使用元素实际尺寸: ${elementWidth}x${elementHeight}`);
-                }
-            }
-            // 缩放配置：使用外部传递的参数
-            // scale < 1 会降低图片分辨率，减少 base64 大小
-            if (this.options.scale !== undefined && this.options.scale !== 1) {
-                contextOptions.scale = this.options.scale;
-            }
-            // 优化：复用 context，避免频繁创建和销毁（性能提升 20%+）
-            // 只在元素变化、配置变化或内容变化时重新创建 context
-            // 1. 计算配置哈希
-            const contextOptionsHash = JSON.stringify({
-                workerNumber,
-                quality: finalQuality,
-                scale: contextOptions.scale,
-                width: contextOptions.width,
-                height: contextOptions.height,
-                maximumCanvasSize: contextOptions.maximumCanvasSize,
-                timeout: contextOptions.timeout
-            });
-            // 2. 计算 DOM 内容哈希（检测内容变化）
-            // 通过检测图片 URL、文本内容等来判断内容是否变化
-            // 注意：modern-screenshot 的 context 在创建时会"快照" DOM 状态
-            // 如果 DOM 内容变化了，必须重新创建 context 才能捕获最新内容
-            const contentHash = this.calculateContentHash(element);
-            // 3. 检查 context 是否过期（超过最大存活时间）
-            // 缩短过期时间，确保频繁变化的内容能及时更新
-            const now = Date.now();
-            const isContextExpired = this.contextLastUpdateTime > 0 &&
-                (now - this.contextLastUpdateTime) > this.contextMaxAge;
-            // 4. 判断是否需要重新创建 context
-            // 关键：如果内容哈希变化，必须重新创建 context（modern-screenshot 的限制）
-            const needsRecreateContext = !this.screenshotContext ||
-                this.contextElement !== element ||
-                this.contextOptionsHash !== contextOptionsHash ||
-                this.contextContentHash !== contentHash || // 内容变化时强制重新创建
-                isContextExpired;
-            if (needsRecreateContext) {
-                if (!this.options.silentMode) {
-                    if (this.screenshotContext) {
-                        let reason = '检测到';
-                        if (this.contextElement !== element)
-                            reason += '元素变化';
-                        if (this.contextOptionsHash !== contextOptionsHash)
-                            reason += '配置变化';
-                        if (this.contextContentHash !== contentHash)
-                            reason += '内容变化';
-                        if (isContextExpired)
-                            reason += 'context 过期';
-                        console.log(`📸 ${reason}，重新创建 context...`);
-                    }
-                    else {
-                        console.log(`📸 Worker 模式: ${workerNumber} 个 Worker，质量: ${finalQuality.toFixed(2)}，缩放: ${contextOptions.scale || 1}`);
+                // 简化 createContext 配置，只传必要的参数（和 demo 一致）
+                const simpleContextOptions = {
+                    workerNumber, // Worker 数量
+                    // 只有在配置了代理时才传递 fetchFn
+                    ...(shouldUseProxy ? {
+                        fetchFn: handleCrossOriginImage,
+                        fetch: {
+                            requestInit: {
+                                cache: 'no-cache',
+                            },
+                            bypassingCache: true,
+                        },
+                    } : {}),
+                };
+                // 如果用户指定了 workerUrl，使用指定的 URL
+                if (this.options.workerUrl) {
+                    simpleContextOptions.workerUrl = this.options.workerUrl;
+                    if (!this.options.silentMode) {
+                        console.log(`📸 使用指定的 Worker URL: ${this.options.workerUrl}`);
                     }
                 }
-                // 销毁旧 context
-                if (this.screenshotContext) {
-                    try {
-                        destroyContext(this.screenshotContext);
-                    }
-                    catch (e) {
-                        // 忽略清理错误
+                else {
+                    if (!this.options.silentMode) {
+                        console.log('📸 Worker URL 未指定，modern-screenshot 将自动处理');
                     }
-                    this.screenshotContext = null;
-                }
-                // 添加 progress 回调（可选，用于显示进度）
-                if (!this.options.silentMode) {
-                    contextOptions.progress = (current, total) => {
-                        if (total > 0) {
-                            const percent = Math.round((current / total) * 100);
-                            if (percent % 25 === 0 || current === total) { // 每 25% 或完成时打印
-                                console.log(`📸 截图进度: ${current}/${total} (${percent}%)`);
-                            }
-                        }
-                    };
                 }
-                // 添加重试机制创建新 context
-                let retries = 0;
-                const maxRetries = this.options.maxRetries || 2;
-                while (retries <= maxRetries) {
-                    try {
-                        // 等待图片加载完成（确保内容是最新的）
-                        await this.waitForImagesToLoad(element);
-                        // 等待 DOM 更新完成（确保内容渲染完成）
-                        // 使用双重 requestAnimationFrame + setTimeout 确保内容完全渲染
-                        await new Promise(resolve => {
-                            requestAnimationFrame(() => {
-                                requestAnimationFrame(() => {
-                                    // 根据截图间隔调整等待时间：频繁截图时等待更久
-                                    const waitTime = this.options.interval < 2000 ? 200 : 100;
-                                    setTimeout(resolve, waitTime);
-                                });
-                            });
-                        });
-                        // 创建 context 前，再次检查内容是否变化（防止在等待期间内容又变化了）
-                        const latestContentHash = this.calculateContentHash(element);
-                        if (latestContentHash !== contentHash) {
-                            if (!this.options.silentMode) {
-                                console.log('📸 等待期间内容发生变化，更新内容哈希');
-                            }
-                            // 更新 contentHash，但继续使用新的 context
-                            // 这样下次截图时会检测到变化
-                        }
-                        this.screenshotContext = await createContext$1(element, contextOptions);
-                        this.contextElement = element;
-                        this.contextOptionsHash = contextOptionsHash;
-                        this.contextContentHash = contentHash;
-                        this.contextLastUpdateTime = now;
-                        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));
+                try {
+                    this.screenshotContext = await createContext$1(element, simpleContextOptions);
+                    if (!this.options.silentMode) {
+                        console.log('📸 Worker 上下文创建成功');
                     }
                 }
-            }
-            else {
-                if (!this.options.silentMode) {
-                    console.log('📸 复用现有 context（性能优化）');
-                }
-                // ⚠️ 重要：modern-screenshot 的 context 在创建时会"快照" DOM 状态
-                // 如果 DOM 内容在 context 创建后发生了变化，复用 context 会捕获到旧内容
-                // 因此，我们需要在每次截图前再次检查内容是否变化
-                // 再次计算内容哈希，检查是否在复用期间内容又变化了
-                const latestContentHash = this.calculateContentHash(element);
-                if (latestContentHash !== this.contextContentHash) {
-                    // 内容在复用期间又变化了，必须重新创建 context
+                catch (error) {
                     if (!this.options.silentMode) {
-                        console.log('📸 ⚠️ 复用期间检测到内容变化，强制重新创建 context');
-                    }
-                    // 销毁旧 context
-                    if (this.screenshotContext) {
-                        try {
-                            destroyContext(this.screenshotContext);
-                        }
-                        catch (e) {
-                            // 忽略清理错误
-                        }
-                        this.screenshotContext = null;
-                    }
-                    // 等待图片加载和 DOM 更新
-                    await this.waitForImagesToLoad(element);
-                    await new Promise(resolve => {
-                        requestAnimationFrame(() => {
-                            requestAnimationFrame(() => {
-                                const waitTime = this.options.interval < 2000 ? 200 : 100;
-                                setTimeout(resolve, waitTime);
-                            });
-                        });
-                    });
-                    // 重新创建 context
-                    let retries = 0;
-                    const maxRetries = this.options.maxRetries || 2;
-                    while (retries <= maxRetries) {
-                        try {
-                            this.screenshotContext = await createContext$1(element, contextOptions);
-                            this.contextElement = element;
-                            this.contextOptionsHash = contextOptionsHash;
-                            this.contextContentHash = latestContentHash;
-                            this.contextLastUpdateTime = Date.now();
-                            break;
-                        }
-                        catch (error) {
-                            if (retries === maxRetries) {
-                                throw new Error(`重新创建截图上下文失败（已重试 ${maxRetries} 次）: ${error instanceof Error ? error.message : String(error)}`);
-                            }
-                            retries++;
-                            const delay = 1000 * retries;
-                            if (!this.options.silentMode) {
-                                console.warn(`📸 ⚠️ 重新创建截图上下文失败，${delay}ms 后重试 (${retries}/${maxRetries})...`);
-                            }
-                            await new Promise(resolve => setTimeout(resolve, delay));
-                        }
+                        console.error('📸 创建 Worker 上下文失败:', error);
                     }
-                }
-                else {
-                    // 内容没有变化，可以安全复用 context
-                    // 但还是要等待图片加载完成，确保内容是最新的
-                    await this.waitForImagesToLoad(element);
-                    // 等待 DOM 更新完成
-                    await new Promise(resolve => {
-                        requestAnimationFrame(() => {
-                            requestAnimationFrame(() => {
-                                setTimeout(resolve, 100); // 额外等待 100ms，确保内容完全渲染
-                            });
-                        });
-                    });
+                    throw error;
                 }
             }
             try {
-                // 根据输出格式选择对应的 API，避免格式转换（性能优化）
-                // 注意：timeout 已经在 createContext 时设置，modern-screenshot 内部会处理超时
+                // 按照 demo 的方式：使用 domToWebp 时传递配置参数
                 let dataUrl;
                 const outputFormat = this.options.outputFormat || 'webp';
                 if (!this.options.silentMode) {
                     console.log(`📸 使用 ${outputFormat.toUpperCase()} 格式截图（直接输出，无需转换）...`);
                 }
+                // 构建 domToWebp/domToJpeg/domToPng 的配置参数（和 demo 一致）
+                const screenshotOptions = {
+                    scale: this.options.scale ?? 0.7, // 使用外部参数，默认 0.7（和 demo 一致）
+                    backgroundColor: this.options.backgroundColor ?? '#ffffff', // 默认白色背景
+                    type: `image/${outputFormat}`, // 使用配置的输出格式
+                    quality: this.options.quality ?? 0.6, // 使用外部参数，默认 0.6（和 demo 一致）
+                    drawImageInterval: this.options.drawImageInterval ?? 20, // 默认 20ms（和 demo 一致）
+                    features: {
+                        copyScrollbar: false,
+                        removeAbnormalAttributes: true,
+                        removeControlCharacter: true,
+                        fixSvgXmlDecode: true,
+                        restoreScrollPosition: false,
+                    },
+                    timeout: 10000, // 10秒超时（和 demo 一致）
+                };
                 // 尝试使用 Worker 模式（context）
                 try {
-                    // 根据输出格式选择对应的 API
-                    // modern-screenshot 内部已经处理了超时，不需要额外的 Promise.race
+                    // 根据输出格式选择对应的 API，传递配置参数（和 demo 一致）
                     if (outputFormat === 'webp') {
-                        // 使用 domToWebp，直接输出 WebP 格式，无需转换
-                        dataUrl = await domToWebp(this.screenshotContext);
+                        dataUrl = await domToWebp(this.screenshotContext, screenshotOptions);
                     }
                     else if (outputFormat === 'jpeg') {
-                        // 使用 domToJpeg，直接输出 JPEG 格式，无需转换
-                        dataUrl = await domToJpeg(this.screenshotContext);
+                        dataUrl = await domToJpeg(this.screenshotContext, screenshotOptions);
                     }
                     else {
-                        // 默认使用 domToPng
-                        dataUrl = await domToPng(this.screenshotContext);
+                        dataUrl = await domToPng(this.screenshotContext, screenshotOptions);
                     }
                     // 验证截图结果
                     if (!dataUrl || dataUrl.length < 100) {
@@ -16042,7 +15757,7 @@ class ScreenshotManager {
                     return dataUrl;
                 }
                 catch (workerError) {
-                    // Worker 模式失败，回退到普通模式（参考用户代码）
+                    // Worker 模式失败，回退到普通模式（和 demo 一致）
                     if (!this.options.silentMode) {
                         console.warn('📸 Worker 模式失败，回退到普通模式:', workerError);
                     }
@@ -16056,14 +15771,14 @@ class ScreenshotManager {
                         }
                         this.screenshotContext = null;
                     }
-                    // 回退到普通模式（直接使用 domToWebp，不传 context）
-                    // 使用外部传递的参数，并给出合理的默认值
+                    // 回退到普通模式（直接使用 element，不传 context）
+                    // 使用更低的参数（和 demo 一致）
                     const fallbackOptions = {
-                        scale: this.options.scale ?? 1, // 使用外部参数，默认 1
-                        backgroundColor: '#ffffff', // 默认白色背景
-                        type: `image/${outputFormat}`, // 使用配置的输出格式
-                        quality: this.options.quality ?? 0.8, // 使用外部参数，默认 0.4
-                        drawImageInterval: 20, // 默认 20ms，减少主线程阻塞
+                        scale: 0.3, // 回退模式使用更低的 scale（和 demo 一致）
+                        backgroundColor: this.options.backgroundColor ?? '#ffffff',
+                        type: `image/${outputFormat}`,
+                        quality: 0.3, // 回退模式使用更低的质量（和 demo 一致）
+                        drawImageInterval: this.options.drawImageInterval ?? 20,
                         features: {
                             copyScrollbar: false,
                             removeAbnormalAttributes: true,
@@ -16071,10 +15786,8 @@ class ScreenshotManager {
                             fixSvgXmlDecode: true,
                             restoreScrollPosition: false,
                         },
-                        timeout: Math.max((this.options.interval ?? 5000) * 6, 10000), // 使用外部参数计算超时，默认 10 秒
+                        timeout: 10000, // 10秒超时（和 demo 一致）
                     };
-                    // 限制 timeout 最多 15 秒
-                    fallbackOptions.timeout = Math.min(fallbackOptions.timeout, 15000);
                     if (outputFormat === 'webp') {
                         dataUrl = await domToWebp(element, fallbackOptions);
                     }
@@ -17421,10 +17134,6 @@ class ScreenshotManager {
                     // 忽略清理错误
                 }
                 this.screenshotContext = null;
-                this.contextElement = null;
-                this.contextOptionsHash = '';
-                this.contextContentHash = '';
-                this.contextLastUpdateTime = 0;
             }
             if (!this.options.silentMode) {
                 console.log(`📸 截图引擎已更新: ${oldEngine} → ${newEngine}`);
@@ -17448,10 +17157,6 @@ class ScreenshotManager {
                 // 忽略清理错误
             }
             this.screenshotContext = null;
-            this.contextElement = null;
-            this.contextOptionsHash = '';
-            this.contextContentHash = '';
-            this.contextLastUpdateTime = 0;
         }
         this.stopScreenshot();
         if (this.worker) {