customer-chat-sdk 1.0.72 → 1.0.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14318,11 +14318,6 @@ class ScreenshotManager {
14318
14318
  this.screenshotTimer = null;
14319
14319
  // modern-screenshot Worker 上下文(用于复用,避免频繁创建和销毁)
14320
14320
  this.screenshotContext = null;
14321
- this.contextElement = null; // 当前 context 对应的元素
14322
- this.contextOptionsHash = ''; // context 配置的哈希值,用于判断是否需要重新创建
14323
- this.contextContentHash = ''; // DOM 内容哈希值,用于检测内容变化
14324
- this.contextLastUpdateTime = 0; // context 最后更新时间
14325
- this.contextMaxAge = 5000; // context 最大存活时间(5秒),超过后强制刷新(缩短到5秒,确保内容及时更新)
14326
14321
  // 截图锁,防止并发截图
14327
14322
  this.isScreenshotInProgress = false;
14328
14323
  // 截图队列(用于处理频繁的截图请求)
@@ -14380,7 +14375,10 @@ class ScreenshotManager {
14380
14375
  fetchPriority: options.fetchPriority ?? 'high', // 默认高优先级
14381
14376
  maxImageSize: options.maxImageSize ?? 5, // 不使用代理时,单个图片最大尺寸(MB),默认5MB
14382
14377
  skipLargeImages: options.skipLargeImages ?? true, // 不使用代理时,是否跳过过大的图片,默认true(跳过)
14383
- workerNumber: options.workerNumber ?? undefined // modern-screenshot Worker 数量,默认自动计算(undefined 表示自动)
14378
+ workerNumber: options.workerNumber ?? undefined, // modern-screenshot Worker 数量,默认自动计算(undefined 表示自动)
14379
+ workerUrl: options.workerUrl ?? undefined, // modern-screenshot Worker URL,默认自动
14380
+ drawImageInterval: options.drawImageInterval ?? 20, // modern-screenshot drawImageInterval,默认 20ms
14381
+ backgroundColor: options.backgroundColor ?? '#ffffff', // modern-screenshot backgroundColor,默认 '#ffffff'
14384
14382
  };
14385
14383
  this.setupMessageListener();
14386
14384
  this.setupVisibilityChangeListener();
@@ -14418,82 +14416,10 @@ class ScreenshotManager {
14418
14416
  // 忽略清理错误
14419
14417
  }
14420
14418
  this.screenshotContext = null;
14421
- this.contextElement = null;
14422
- this.contextOptionsHash = '';
14423
- this.contextContentHash = '';
14424
- this.contextLastUpdateTime = 0;
14425
14419
  }
14426
14420
  }
14427
14421
  this.targetElement = element;
14428
14422
  }
14429
- /**
14430
- * 计算 DOM 内容哈希(用于检测内容变化)
14431
- * 通过检测图片 URL、尺寸、文本内容等来判断内容是否变化
14432
- */
14433
- calculateContentHash(element) {
14434
- try {
14435
- // 收集关键内容信息
14436
- const contentInfo = {
14437
- // 收集所有图片 URL 和尺寸(用于检测图片变化)
14438
- // 只收集可见的图片,避免隐藏图片影响哈希
14439
- images: Array.from(element.querySelectorAll('img'))
14440
- .filter(img => {
14441
- const style = window.getComputedStyle(img);
14442
- return style.display !== 'none' && style.visibility !== 'hidden';
14443
- })
14444
- .map(img => ({
14445
- src: img.src,
14446
- currentSrc: img.currentSrc || img.src, // 使用 currentSrc 检测响应式图片变化
14447
- naturalWidth: img.naturalWidth,
14448
- naturalHeight: img.naturalHeight,
14449
- complete: img.complete // 检测图片是否加载完成
14450
- })),
14451
- // 收集关键文本内容(前 500 个字符,减少计算量)
14452
- text: element.innerText?.substring(0, 500) || '',
14453
- // 收集关键元素的类名和 ID(用于检测结构变化)
14454
- // 只收集前 30 个,减少计算量
14455
- structure: Array.from(element.querySelectorAll('[class], [id]'))
14456
- .slice(0, 30)
14457
- .map(el => ({
14458
- tag: el.tagName,
14459
- class: el.className,
14460
- id: el.id
14461
- })),
14462
- // 收集背景图片 URL(只收集前 10 个)
14463
- backgrounds: Array.from(element.querySelectorAll('[style*="background"]'))
14464
- .slice(0, 10)
14465
- .map(el => {
14466
- try {
14467
- const style = window.getComputedStyle(el);
14468
- return {
14469
- backgroundImage: style.backgroundImage,
14470
- backgroundSize: style.backgroundSize
14471
- };
14472
- }
14473
- catch {
14474
- return null;
14475
- }
14476
- })
14477
- .filter(Boolean)
14478
- };
14479
- // 生成哈希值(简单的 JSON 字符串哈希)
14480
- const hashString = JSON.stringify(contentInfo);
14481
- // 使用简单的哈希算法(FNV-1a)
14482
- let hash = 2166136261;
14483
- for (let i = 0; i < hashString.length; i++) {
14484
- hash ^= hashString.charCodeAt(i);
14485
- hash += (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
14486
- }
14487
- return hash.toString(36);
14488
- }
14489
- catch (error) {
14490
- // 如果计算失败,使用时间戳作为后备(强制刷新)
14491
- if (!this.options.silentMode) {
14492
- console.warn('📸 计算内容哈希失败,使用时间戳:', error);
14493
- }
14494
- return Date.now().toString();
14495
- }
14496
- }
14497
14423
  /**
14498
14424
  * 设置消息监听
14499
14425
  */
@@ -15619,21 +15545,6 @@ class ScreenshotManager {
15619
15545
  console.log(`📸 窗口尺寸: ${window.innerWidth}x${window.innerHeight}`);
15620
15546
  }
15621
15547
  }
15622
- const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
15623
- const isLowEndDevice = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;
15624
- // 进一步降低质量以减少 base64 大小
15625
- // 桌面设备:使用配置的质量(默认 0.3)
15626
- // 移动设备/低端设备:进一步降低到 0.2(最低)
15627
- const finalQuality = isMobile || isLowEndDevice
15628
- ? Math.max(this.options.quality * 0.65, 0.2) // 移动设备:质量 * 0.65,最低 0.2
15629
- : this.options.quality; // 桌面设备:使用配置的质量(默认 0.3)
15630
- // 计算压缩后的尺寸(对所有元素都应用,包括 document.body)
15631
- // 这样可以避免生成过大的截图,减少 base64 大小
15632
- const { width, height } = this.calculateCompressedSize(elementWidth, elementHeight, this.options.maxWidth, this.options.maxHeight);
15633
- // 使用计算后的压缩尺寸(确保不超过 maxWidth/maxHeight)
15634
- // 对于 body 元素,已经使用了 window.innerWidth/innerHeight,所以直接使用压缩尺寸即可
15635
- const finalWidth = width;
15636
- const finalHeight = height;
15637
15548
  // 判断是否使用代理
15638
15549
  const shouldUseProxy = this.options.useProxy && this.options.proxyUrl && this.options.proxyUrl.trim() !== '';
15639
15550
  // 处理跨域图片的函数(仅在配置了代理时使用)
@@ -15732,6 +15643,8 @@ class ScreenshotManager {
15732
15643
  else {
15733
15644
  // 自动计算 workerNumber
15734
15645
  const cpuCores = navigator.hardwareConcurrency || 4; // 默认假设 4 核
15646
+ const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
15647
+ const isLowEndDevice = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;
15735
15648
  if (isMobile || isLowEndDevice) {
15736
15649
  // 移动设备/低端设备:使用 1 个 Worker(避免内存压力)
15737
15650
  workerNumber = 1;
@@ -15753,282 +15666,86 @@ class ScreenshotManager {
15753
15666
  }
15754
15667
  // 限制 workerNumber 范围:1-8(避免过多 Worker 导致资源竞争)
15755
15668
  workerNumber = Math.max(1, Math.min(8, workerNumber));
15756
- // 构建 createContext 配置
15757
- // 参考: https://github.com/qq15725/modern-screenshot/blob/main/src/options.ts
15758
- const contextOptions = {
15759
- workerNumber, // Worker 数量,> 0 启用 Worker 模式
15760
- quality: finalQuality, // 图片质量(0-1),已优化为更低的值以减少 base64 大小
15761
- // 只有在配置了代理时才传递 fetchFn,否则让 modern-screenshot 自己处理(性能更好)
15762
- ...(shouldUseProxy ? {
15763
- fetchFn: handleCrossOriginImage, // 使用代理服务器处理跨域图片
15764
- fetch: {
15765
- requestInit: {
15766
- cache: 'no-cache',
15767
- },
15768
- bypassingCache: true,
15769
- },
15770
- } : {}),
15771
- // 设置最大 canvas 尺寸,防止生成过大的 canvas(避免内存问题)
15772
- // 参考: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
15773
- // 大多数浏览器限制为 16,777,216 像素(4096x4096),这里设置为更保守的值
15774
- maximumCanvasSize: 16777216, // 16M 像素(约 4096x4096)
15775
- // 使用 modern-screenshot 内置的 timeout(更可靠)
15776
- timeout: Math.max(this.options.interval * 6, 5000),
15777
- };
15778
- // 限制 timeout 最多 15 秒
15779
- contextOptions.timeout = Math.min(contextOptions.timeout, 15000);
15780
- // 如果用户指定了 workerUrl,使用指定的 URL
15781
- // 否则让 modern-screenshot 自动处理(它会尝试从 node_modules 或 CDN 加载)
15782
- // 注意:在某些构建工具(如 Rollup)中,可能需要手动指定 workerUrl
15783
- if (this.options.workerUrl) {
15784
- contextOptions.workerUrl = this.options.workerUrl;
15785
- if (!this.options.silentMode) {
15786
- console.log(`📸 使用指定的 Worker URL: ${this.options.workerUrl}`);
15787
- }
15788
- }
15789
- else {
15790
- // 未指定 workerUrl 时,modern-screenshot 会自动处理
15791
- // 但在某些构建环境中可能需要手动指定,可以使用 CDN 作为后备
15792
- // 这里不设置 workerUrl,让 modern-screenshot 自己处理
15669
+ // 按照 demo 的方式:只在 context 不存在时创建,之后一直复用
15670
+ // 不进行复杂的检测和重新创建逻辑
15671
+ if (!this.screenshotContext) {
15793
15672
  if (!this.options.silentMode) {
15794
- console.log('📸 Worker URL 未指定,modern-screenshot 将自动处理');
15673
+ console.log(`📸 创建截图 Worker 上下文...`);
15674
+ console.log(`📸 Worker 模式: ${workerNumber} 个 Worker`);
15795
15675
  }
15796
- }
15797
- // 对所有元素都设置尺寸限制(包括 document.body),避免截图过大
15798
- // 这样可以减少 base64 大小,提高性能
15799
- if (finalWidth && finalHeight) {
15800
- contextOptions.width = finalWidth;
15801
- contextOptions.height = finalHeight;
15802
- if (!this.options.silentMode) {
15803
- if (element === document.body || element === document.documentElement) {
15804
- console.log(`📸 截取完整页面(document.body),使用压缩尺寸: ${finalWidth}x${finalHeight}`);
15805
- }
15806
- else {
15807
- console.log(`📸 使用压缩尺寸: ${finalWidth}x${finalHeight}`);
15808
- }
15809
- }
15810
- }
15811
- else {
15812
- if (!this.options.silentMode) {
15813
- console.log(`📸 使用元素实际尺寸: ${elementWidth}x${elementHeight}`);
15814
- }
15815
- }
15816
- // 缩放配置:使用外部传递的参数
15817
- // scale < 1 会降低图片分辨率,减少 base64 大小
15818
- if (this.options.scale !== undefined && this.options.scale !== 1) {
15819
- contextOptions.scale = this.options.scale;
15820
- }
15821
- // 优化:复用 context,避免频繁创建和销毁(性能提升 20%+)
15822
- // 只在元素变化、配置变化或内容变化时重新创建 context
15823
- // 1. 计算配置哈希
15824
- const contextOptionsHash = JSON.stringify({
15825
- workerNumber,
15826
- quality: finalQuality,
15827
- scale: contextOptions.scale,
15828
- width: contextOptions.width,
15829
- height: contextOptions.height,
15830
- maximumCanvasSize: contextOptions.maximumCanvasSize,
15831
- timeout: contextOptions.timeout
15832
- });
15833
- // 2. 计算 DOM 内容哈希(检测内容变化)
15834
- // 通过检测图片 URL、文本内容等来判断内容是否变化
15835
- // 注意:modern-screenshot 的 context 在创建时会"快照" DOM 状态
15836
- // 如果 DOM 内容变化了,必须重新创建 context 才能捕获最新内容
15837
- const contentHash = this.calculateContentHash(element);
15838
- // 3. 检查 context 是否过期(超过最大存活时间)
15839
- // 缩短过期时间,确保频繁变化的内容能及时更新
15840
- const now = Date.now();
15841
- const isContextExpired = this.contextLastUpdateTime > 0 &&
15842
- (now - this.contextLastUpdateTime) > this.contextMaxAge;
15843
- // 4. 判断是否需要重新创建 context
15844
- // 关键:如果内容哈希变化,必须重新创建 context(modern-screenshot 的限制)
15845
- const needsRecreateContext = !this.screenshotContext ||
15846
- this.contextElement !== element ||
15847
- this.contextOptionsHash !== contextOptionsHash ||
15848
- this.contextContentHash !== contentHash || // 内容变化时强制重新创建
15849
- isContextExpired;
15850
- if (needsRecreateContext) {
15851
- if (!this.options.silentMode) {
15852
- if (this.screenshotContext) {
15853
- let reason = '检测到';
15854
- if (this.contextElement !== element)
15855
- reason += '元素变化';
15856
- if (this.contextOptionsHash !== contextOptionsHash)
15857
- reason += '配置变化';
15858
- if (this.contextContentHash !== contentHash)
15859
- reason += '内容变化';
15860
- if (isContextExpired)
15861
- reason += 'context 过期';
15862
- console.log(`📸 ${reason},重新创建 context...`);
15863
- }
15864
- else {
15865
- console.log(`📸 Worker 模式: ${workerNumber} 个 Worker,质量: ${finalQuality.toFixed(2)},缩放: ${contextOptions.scale || 1}`);
15676
+ // 简化 createContext 配置,只传必要的参数(和 demo 一致)
15677
+ const simpleContextOptions = {
15678
+ workerNumber, // Worker 数量
15679
+ // 只有在配置了代理时才传递 fetchFn
15680
+ ...(shouldUseProxy ? {
15681
+ fetchFn: handleCrossOriginImage,
15682
+ fetch: {
15683
+ requestInit: {
15684
+ cache: 'no-cache',
15685
+ },
15686
+ bypassingCache: true,
15687
+ },
15688
+ } : {}),
15689
+ };
15690
+ // 如果用户指定了 workerUrl,使用指定的 URL
15691
+ if (this.options.workerUrl) {
15692
+ simpleContextOptions.workerUrl = this.options.workerUrl;
15693
+ if (!this.options.silentMode) {
15694
+ console.log(`📸 使用指定的 Worker URL: ${this.options.workerUrl}`);
15866
15695
  }
15867
15696
  }
15868
- // 销毁旧 context
15869
- if (this.screenshotContext) {
15870
- try {
15871
- destroyContext(this.screenshotContext);
15872
- }
15873
- catch (e) {
15874
- // 忽略清理错误
15697
+ else {
15698
+ if (!this.options.silentMode) {
15699
+ console.log('📸 Worker URL 未指定,modern-screenshot 将自动处理');
15875
15700
  }
15876
- this.screenshotContext = null;
15877
15701
  }
15878
- // 添加 progress 回调(可选,用于显示进度)
15879
- if (!this.options.silentMode) {
15880
- contextOptions.progress = (current, total) => {
15881
- if (total > 0) {
15882
- const percent = Math.round((current / total) * 100);
15883
- if (percent % 25 === 0 || current === total) { // 每 25% 或完成时打印
15884
- console.log(`📸 截图进度: ${current}/${total} (${percent}%)`);
15885
- }
15886
- }
15887
- };
15888
- }
15889
- // 添加重试机制创建新 context
15890
- let retries = 0;
15891
- const maxRetries = this.options.maxRetries || 2;
15892
- while (retries <= maxRetries) {
15893
- try {
15894
- // 等待图片加载完成(确保内容是最新的)
15895
- await this.waitForImagesToLoad(element);
15896
- // 等待 DOM 更新完成(确保内容渲染完成)
15897
- // 使用双重 requestAnimationFrame + setTimeout 确保内容完全渲染
15898
- await new Promise(resolve => {
15899
- requestAnimationFrame(() => {
15900
- requestAnimationFrame(() => {
15901
- // 根据截图间隔调整等待时间:频繁截图时等待更久
15902
- const waitTime = this.options.interval < 2000 ? 200 : 100;
15903
- setTimeout(resolve, waitTime);
15904
- });
15905
- });
15906
- });
15907
- // 创建 context 前,再次检查内容是否变化(防止在等待期间内容又变化了)
15908
- const latestContentHash = this.calculateContentHash(element);
15909
- if (latestContentHash !== contentHash) {
15910
- if (!this.options.silentMode) {
15911
- console.log('📸 等待期间内容发生变化,更新内容哈希');
15912
- }
15913
- // 更新 contentHash,但继续使用新的 context
15914
- // 这样下次截图时会检测到变化
15915
- }
15916
- this.screenshotContext = await createContext$1(element, contextOptions);
15917
- this.contextElement = element;
15918
- this.contextOptionsHash = contextOptionsHash;
15919
- this.contextContentHash = contentHash;
15920
- this.contextLastUpdateTime = now;
15921
- break;
15922
- }
15923
- catch (error) {
15924
- if (retries === maxRetries) {
15925
- throw new Error(`创建截图上下文失败(已重试 ${maxRetries} 次): ${error instanceof Error ? error.message : String(error)}`);
15926
- }
15927
- retries++;
15928
- const delay = 1000 * retries; // 递增延迟:1秒、2秒...
15929
- if (!this.options.silentMode) {
15930
- console.warn(`📸 ⚠️ 创建截图上下文失败,${delay}ms 后重试 (${retries}/${maxRetries})...`);
15931
- }
15932
- await new Promise(resolve => setTimeout(resolve, delay));
15702
+ try {
15703
+ this.screenshotContext = await createContext$1(element, simpleContextOptions);
15704
+ if (!this.options.silentMode) {
15705
+ console.log('📸 Worker 上下文创建成功');
15933
15706
  }
15934
15707
  }
15935
- }
15936
- else {
15937
- if (!this.options.silentMode) {
15938
- console.log('📸 复用现有 context(性能优化)');
15939
- }
15940
- // ⚠️ 重要:modern-screenshot 的 context 在创建时会"快照" DOM 状态
15941
- // 如果 DOM 内容在 context 创建后发生了变化,复用 context 会捕获到旧内容
15942
- // 因此,我们需要在每次截图前再次检查内容是否变化
15943
- // 再次计算内容哈希,检查是否在复用期间内容又变化了
15944
- const latestContentHash = this.calculateContentHash(element);
15945
- if (latestContentHash !== this.contextContentHash) {
15946
- // 内容在复用期间又变化了,必须重新创建 context
15708
+ catch (error) {
15947
15709
  if (!this.options.silentMode) {
15948
- console.log('📸 ⚠️ 复用期间检测到内容变化,强制重新创建 context');
15949
- }
15950
- // 销毁旧 context
15951
- if (this.screenshotContext) {
15952
- try {
15953
- destroyContext(this.screenshotContext);
15954
- }
15955
- catch (e) {
15956
- // 忽略清理错误
15957
- }
15958
- this.screenshotContext = null;
15710
+ console.error('📸 创建 Worker 上下文失败:', error);
15959
15711
  }
15960
- // 等待图片加载和 DOM 更新
15961
- await this.waitForImagesToLoad(element);
15962
- await new Promise(resolve => {
15963
- requestAnimationFrame(() => {
15964
- requestAnimationFrame(() => {
15965
- const waitTime = this.options.interval < 2000 ? 200 : 100;
15966
- setTimeout(resolve, waitTime);
15967
- });
15968
- });
15969
- });
15970
- // 重新创建 context
15971
- let retries = 0;
15972
- const maxRetries = this.options.maxRetries || 2;
15973
- while (retries <= maxRetries) {
15974
- try {
15975
- this.screenshotContext = await createContext$1(element, contextOptions);
15976
- this.contextElement = element;
15977
- this.contextOptionsHash = contextOptionsHash;
15978
- this.contextContentHash = latestContentHash;
15979
- this.contextLastUpdateTime = Date.now();
15980
- break;
15981
- }
15982
- catch (error) {
15983
- if (retries === maxRetries) {
15984
- throw new Error(`重新创建截图上下文失败(已重试 ${maxRetries} 次): ${error instanceof Error ? error.message : String(error)}`);
15985
- }
15986
- retries++;
15987
- const delay = 1000 * retries;
15988
- if (!this.options.silentMode) {
15989
- console.warn(`📸 ⚠️ 重新创建截图上下文失败,${delay}ms 后重试 (${retries}/${maxRetries})...`);
15990
- }
15991
- await new Promise(resolve => setTimeout(resolve, delay));
15992
- }
15993
- }
15994
- }
15995
- else {
15996
- // 内容没有变化,可以安全复用 context
15997
- // 但还是要等待图片加载完成,确保内容是最新的
15998
- await this.waitForImagesToLoad(element);
15999
- // 等待 DOM 更新完成
16000
- await new Promise(resolve => {
16001
- requestAnimationFrame(() => {
16002
- requestAnimationFrame(() => {
16003
- setTimeout(resolve, 100); // 额外等待 100ms,确保内容完全渲染
16004
- });
16005
- });
16006
- });
15712
+ throw error;
16007
15713
  }
16008
15714
  }
16009
15715
  try {
16010
- // 根据输出格式选择对应的 API,避免格式转换(性能优化)
16011
- // 注意:timeout 已经在 createContext 时设置,modern-screenshot 内部会处理超时
15716
+ // 按照 demo 的方式:使用 domToWebp 时传递配置参数
16012
15717
  let dataUrl;
16013
15718
  const outputFormat = this.options.outputFormat || 'webp';
16014
15719
  if (!this.options.silentMode) {
16015
15720
  console.log(`📸 使用 ${outputFormat.toUpperCase()} 格式截图(直接输出,无需转换)...`);
16016
15721
  }
15722
+ // 构建 domToWebp/domToJpeg/domToPng 的配置参数(和 demo 一致)
15723
+ const screenshotOptions = {
15724
+ scale: this.options.scale ?? 0.7, // 使用外部参数,默认 0.7(和 demo 一致)
15725
+ backgroundColor: this.options.backgroundColor ?? '#ffffff', // 默认白色背景
15726
+ type: `image/${outputFormat}`, // 使用配置的输出格式
15727
+ quality: this.options.quality ?? 0.6, // 使用外部参数,默认 0.6(和 demo 一致)
15728
+ drawImageInterval: this.options.drawImageInterval ?? 20, // 默认 20ms(和 demo 一致)
15729
+ features: {
15730
+ copyScrollbar: false,
15731
+ removeAbnormalAttributes: true,
15732
+ removeControlCharacter: true,
15733
+ fixSvgXmlDecode: true,
15734
+ restoreScrollPosition: false,
15735
+ },
15736
+ timeout: 10000, // 10秒超时(和 demo 一致)
15737
+ };
16017
15738
  // 尝试使用 Worker 模式(context)
16018
15739
  try {
16019
- // 根据输出格式选择对应的 API
16020
- // modern-screenshot 内部已经处理了超时,不需要额外的 Promise.race
15740
+ // 根据输出格式选择对应的 API,传递配置参数(和 demo 一致)
16021
15741
  if (outputFormat === 'webp') {
16022
- // 使用 domToWebp,直接输出 WebP 格式,无需转换
16023
- dataUrl = await domToWebp(this.screenshotContext);
15742
+ dataUrl = await domToWebp(this.screenshotContext, screenshotOptions);
16024
15743
  }
16025
15744
  else if (outputFormat === 'jpeg') {
16026
- // 使用 domToJpeg,直接输出 JPEG 格式,无需转换
16027
- dataUrl = await domToJpeg(this.screenshotContext);
15745
+ dataUrl = await domToJpeg(this.screenshotContext, screenshotOptions);
16028
15746
  }
16029
15747
  else {
16030
- // 默认使用 domToPng
16031
- dataUrl = await domToPng(this.screenshotContext);
15748
+ dataUrl = await domToPng(this.screenshotContext, screenshotOptions);
16032
15749
  }
16033
15750
  // 验证截图结果
16034
15751
  if (!dataUrl || dataUrl.length < 100) {
@@ -16040,7 +15757,7 @@ class ScreenshotManager {
16040
15757
  return dataUrl;
16041
15758
  }
16042
15759
  catch (workerError) {
16043
- // Worker 模式失败,回退到普通模式(参考用户代码)
15760
+ // Worker 模式失败,回退到普通模式(和 demo 一致)
16044
15761
  if (!this.options.silentMode) {
16045
15762
  console.warn('📸 Worker 模式失败,回退到普通模式:', workerError);
16046
15763
  }
@@ -16054,14 +15771,14 @@ class ScreenshotManager {
16054
15771
  }
16055
15772
  this.screenshotContext = null;
16056
15773
  }
16057
- // 回退到普通模式(直接使用 domToWebp,不传 context)
16058
- // 使用外部传递的参数,并给出合理的默认值
15774
+ // 回退到普通模式(直接使用 element,不传 context)
15775
+ // 使用更低的参数(和 demo 一致)
16059
15776
  const fallbackOptions = {
16060
- scale: this.options.scale ?? 1, // 使用外部参数,默认 1
16061
- backgroundColor: '#ffffff', // 默认白色背景
16062
- type: `image/${outputFormat}`, // 使用配置的输出格式
16063
- quality: this.options.quality ?? 0.8, // 使用外部参数,默认 0.4
16064
- drawImageInterval: 20, // 默认 20ms,减少主线程阻塞
15777
+ scale: 0.3, // 回退模式使用更低的 scale(和 demo 一致)
15778
+ backgroundColor: this.options.backgroundColor ?? '#ffffff',
15779
+ type: `image/${outputFormat}`,
15780
+ quality: 0.3, // 回退模式使用更低的质量(和 demo 一致)
15781
+ drawImageInterval: this.options.drawImageInterval ?? 20,
16065
15782
  features: {
16066
15783
  copyScrollbar: false,
16067
15784
  removeAbnormalAttributes: true,
@@ -16069,10 +15786,8 @@ class ScreenshotManager {
16069
15786
  fixSvgXmlDecode: true,
16070
15787
  restoreScrollPosition: false,
16071
15788
  },
16072
- timeout: Math.max((this.options.interval ?? 5000) * 6, 10000), // 使用外部参数计算超时,默认 10
15789
+ timeout: 10000, // 10秒超时(和 demo 一致)
16073
15790
  };
16074
- // 限制 timeout 最多 15 秒
16075
- fallbackOptions.timeout = Math.min(fallbackOptions.timeout, 15000);
16076
15791
  if (outputFormat === 'webp') {
16077
15792
  dataUrl = await domToWebp(element, fallbackOptions);
16078
15793
  }
@@ -17419,10 +17134,6 @@ class ScreenshotManager {
17419
17134
  // 忽略清理错误
17420
17135
  }
17421
17136
  this.screenshotContext = null;
17422
- this.contextElement = null;
17423
- this.contextOptionsHash = '';
17424
- this.contextContentHash = '';
17425
- this.contextLastUpdateTime = 0;
17426
17137
  }
17427
17138
  if (!this.options.silentMode) {
17428
17139
  console.log(`📸 截图引擎已更新: ${oldEngine} → ${newEngine}`);
@@ -17446,10 +17157,6 @@ class ScreenshotManager {
17446
17157
  // 忽略清理错误
17447
17158
  }
17448
17159
  this.screenshotContext = null;
17449
- this.contextElement = null;
17450
- this.contextOptionsHash = '';
17451
- this.contextContentHash = '';
17452
- this.contextLastUpdateTime = 0;
17453
17160
  }
17454
17161
  this.stopScreenshot();
17455
17162
  if (this.worker) {