customer-chat-sdk 1.0.38 → 1.0.41

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.
@@ -2468,12 +2468,24 @@ async function domToDataUrl(node, options) {
2468
2468
  return dataUrl;
2469
2469
  }
2470
2470
 
2471
+ async function domToJpeg(node, options) {
2472
+ return domToDataUrl(
2473
+ await orCreateContext(node, { ...options, type: "image/jpeg" })
2474
+ );
2475
+ }
2476
+
2471
2477
  async function domToPng(node, options) {
2472
2478
  return domToDataUrl(
2473
2479
  await orCreateContext(node, { ...options, type: "image/png" })
2474
2480
  );
2475
2481
  }
2476
2482
 
2483
+ async function domToWebp(node, options) {
2484
+ return domToDataUrl(
2485
+ await orCreateContext(node, { ...options, type: "image/webp" })
2486
+ );
2487
+ }
2488
+
2477
2489
  /*
2478
2490
  * snapdom
2479
2491
  * v.1.9.14
@@ -14307,6 +14319,13 @@ class ScreenshotManager {
14307
14319
  this.screenshotTimer = null;
14308
14320
  // modern-screenshot Worker 上下文(用于复用,避免频繁创建和销毁)
14309
14321
  this.screenshotContext = null;
14322
+ this.contextElement = null; // 当前 context 对应的元素
14323
+ this.contextOptionsHash = ''; // context 配置的哈希值,用于判断是否需要重新创建
14324
+ // 截图锁,防止并发截图
14325
+ this.isScreenshotInProgress = false;
14326
+ // 截图队列(用于处理频繁的截图请求)
14327
+ this.screenshotQueue = [];
14328
+ this.isProcessingQueue = false;
14310
14329
  // PostMessage 监听器
14311
14330
  this.messageHandler = null;
14312
14331
  // 动态轮询间隔(由 iframe 消息控制)
@@ -14332,7 +14351,7 @@ class ScreenshotManager {
14332
14351
  this.globalRejectionHandler = null;
14333
14352
  this.targetElement = targetElement;
14334
14353
  this.options = {
14335
- interval: options.interval ?? 5000,
14354
+ interval: options.interval ?? 1000,
14336
14355
  quality: options.quality ?? 0.3, // 降低默认质量:0.4 -> 0.3,减少 base64 大小
14337
14356
  scale: options.scale ?? 1,
14338
14357
  maxHistory: options.maxHistory ?? 10,
@@ -14359,7 +14378,8 @@ class ScreenshotManager {
14359
14378
  maxCacheSize: options.maxCacheSize ?? 50, // 默认最大50MB
14360
14379
  maxCacheAge: options.maxCacheAge ?? 86400000, // 默认24小时(86400000ms)
14361
14380
  maxImageSize: options.maxImageSize ?? 5, // 不使用代理时,单个图片最大尺寸(MB),默认5MB
14362
- skipLargeImages: options.skipLargeImages ?? true // 不使用代理时,是否跳过过大的图片,默认true(跳过)
14381
+ skipLargeImages: options.skipLargeImages ?? true, // 不使用代理时,是否跳过过大的图片,默认true(跳过)
14382
+ workerNumber: options.workerNumber ?? undefined // modern-screenshot Worker 数量,默认自动计算(undefined 表示自动)
14363
14383
  };
14364
14384
  this.setupMessageListener();
14365
14385
  this.setupVisibilityChangeListener();
@@ -14387,15 +14407,22 @@ class ScreenshotManager {
14387
14407
  * 设置目标元素
14388
14408
  */
14389
14409
  setTargetElement(element) {
14390
- // 如果元素改变了,清理旧的 Worker 上下文
14391
- if (this.targetElement !== element && this.screenshotContext) {
14392
- try {
14393
- destroyContext(this.screenshotContext);
14394
- }
14395
- catch (e) {
14396
- // 忽略清理错误
14410
+ // 如果元素变化,需要清理 context(下次截图时会重新创建)
14411
+ if (this.targetElement !== element) {
14412
+ if (this.screenshotContext) {
14413
+ try {
14414
+ destroyContext(this.screenshotContext);
14415
+ if (!this.options.silentMode) {
14416
+ console.log('📸 目标元素变化,清理 context');
14417
+ }
14418
+ }
14419
+ catch (e) {
14420
+ // 忽略清理错误
14421
+ }
14422
+ this.screenshotContext = null;
14423
+ this.contextElement = null;
14424
+ this.contextOptionsHash = '';
14397
14425
  }
14398
- this.screenshotContext = null;
14399
14426
  }
14400
14427
  this.targetElement = element;
14401
14428
  }
@@ -14623,22 +14650,36 @@ class ScreenshotManager {
14623
14650
  if (!this.worker && this.options.compress) {
14624
14651
  this.worker = this.createWorker();
14625
14652
  }
14626
- // 设置定时器
14627
- this.screenshotTimer = setInterval(async () => {
14653
+ // 设置定时器(使用递归 setTimeout,确保等待前一个完成)
14654
+ // 这样可以避免 setInterval 不等待异步完成的问题
14655
+ const scheduleNext = async () => {
14628
14656
  if (this.isRunning && this.isEnabled && !document.hidden) {
14629
- await this.takeScreenshot();
14630
- // 如果配置了上传,且当前有上传配置,自动上传
14631
- if (this.currentUploadConfig) {
14632
- const latestScreenshot = this.getLatestScreenshot();
14633
- if (latestScreenshot && !this.isUploading) {
14634
- this.uploadScreenshot(latestScreenshot, this.currentUploadConfig)
14635
- .catch((error) => {
14636
- console.error('📸 [轮询] 自动上传失败:', error);
14637
- });
14657
+ try {
14658
+ await this.takeScreenshot();
14659
+ // 如果配置了上传,且当前有上传配置,自动上传
14660
+ if (this.currentUploadConfig) {
14661
+ const latestScreenshot = this.getLatestScreenshot();
14662
+ if (latestScreenshot && !this.isUploading) {
14663
+ this.uploadScreenshot(latestScreenshot, this.currentUploadConfig)
14664
+ .catch((error) => {
14665
+ console.error('📸 [轮询] 自动上传失败:', error);
14666
+ });
14667
+ }
14668
+ }
14669
+ }
14670
+ catch (error) {
14671
+ if (!this.options.silentMode) {
14672
+ console.error('📸 [轮询] 截图失败:', error);
14638
14673
  }
14639
14674
  }
14640
14675
  }
14641
- }, currentInterval);
14676
+ // 如果还在运行,安排下一次截图
14677
+ if (this.isRunning) {
14678
+ this.screenshotTimer = setTimeout(scheduleNext, currentInterval);
14679
+ }
14680
+ };
14681
+ // 立即开始第一次
14682
+ scheduleNext();
14642
14683
  // 注意:不再立即执行一次,因为已经在 takeScreenshotAndUpload 中执行了
14643
14684
  }
14644
14685
  /**
@@ -14941,16 +14982,22 @@ class ScreenshotManager {
14941
14982
  console.log('📸 使用 html2canvas 引擎截图...');
14942
14983
  }
14943
14984
  try {
14985
+ // 检测 iOS 设备
14986
+ const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
14944
14987
  // html2canvas 需要确保样式完全加载,额外等待
14945
- // 等待所有样式表加载完成
14988
+ // iOS 设备需要更长的等待时间,因为样式表加载和处理方式不同
14946
14989
  await this.waitForAllStylesLoaded();
14947
14990
  // 等待字体加载完成
14948
14991
  await this.waitForFonts();
14992
+ // iOS 设备需要额外的等待时间,确保样式完全应用
14993
+ if (isIOS) {
14994
+ await new Promise(resolve => setTimeout(resolve, 300)); // iOS 额外等待 300ms
14995
+ }
14949
14996
  // 等待 DOM 完全渲染
14950
14997
  await new Promise(resolve => {
14951
14998
  requestAnimationFrame(() => {
14952
14999
  requestAnimationFrame(() => {
14953
- setTimeout(() => resolve(), 100);
15000
+ setTimeout(() => resolve(), isIOS ? 200 : 100); // iOS 使用更长的等待时间
14954
15001
  });
14955
15002
  });
14956
15003
  });
@@ -14986,9 +15033,11 @@ class ScreenshotManager {
14986
15033
  // width: finalWidth, // ❌ 移除,会导致宽度不正确
14987
15034
  // height: finalHeight, // ❌ 移除,会导致高度不正确
14988
15035
  // 关键配置:确保样式正确渲染
14989
- // 注意:不要设置 foreignObjectRendering,让 html2canvas 自动选择最佳渲染方式
14990
- // foreignObjectRendering 可能导致样式问题,所以不设置它
14991
- onclone: (clonedDoc, _clonedElement) => {
15036
+ // iOS 特定配置:启用 foreignObjectRendering 以确保样式正确渲染
15037
+ // iOS Safari 和 Chrome 对样式表的处理方式不同,需要启用此选项
15038
+ onclone: (clonedDoc, clonedElement) => {
15039
+ // 检测 iOS 设备(需要在 onclone 内部检测,因为这是回调函数)
15040
+ const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
14992
15041
  // 在克隆的文档中,确保所有样式都正确应用
14993
15042
  // html2canvas 会自动处理样式,但我们需要确保样式表被正确复制
14994
15043
  // 确保 clonedDoc.head 存在
@@ -15077,10 +15126,53 @@ class ScreenshotManager {
15077
15126
  catch (e) {
15078
15127
  // 忽略错误,继续执行
15079
15128
  }
15129
+ // 4. iOS 特定处理:将计算后的样式内联化(确保样式正确应用)
15130
+ // iOS Safari/Chrome 对样式表的处理方式不同,需要将计算后的样式内联化
15131
+ if (isIOS) {
15132
+ try {
15133
+ // 遍历克隆文档中的所有元素,将计算后的样式内联化
15134
+ const allElements = clonedElement.querySelectorAll('*');
15135
+ allElements.forEach((el) => {
15136
+ try {
15137
+ const htmlEl = el;
15138
+ const computedStyle = window.getComputedStyle(htmlEl);
15139
+ // 获取关键样式属性并内联化
15140
+ const importantStyles = [];
15141
+ // 获取所有样式属性(iOS 需要更完整的样式)
15142
+ for (let i = 0; i < computedStyle.length; i++) {
15143
+ const prop = computedStyle[i];
15144
+ const value = computedStyle.getPropertyValue(prop);
15145
+ const priority = computedStyle.getPropertyPriority(prop);
15146
+ // 只内联化非默认值的重要样式
15147
+ if (value && value !== 'none' && value !== 'auto' && value !== 'normal') {
15148
+ importantStyles.push(`${prop}: ${value}${priority === 'important' ? ' !important' : ''}`);
15149
+ }
15150
+ }
15151
+ // 如果有关键样式,添加到内联样式
15152
+ if (importantStyles.length > 0) {
15153
+ const currentStyle = htmlEl.getAttribute('style') || '';
15154
+ const newStyle = currentStyle
15155
+ ? `${currentStyle}; ${importantStyles.join('; ')}`
15156
+ : importantStyles.join('; ');
15157
+ htmlEl.setAttribute('style', newStyle);
15158
+ }
15159
+ }
15160
+ catch (e) {
15161
+ // 忽略单个元素的错误
15162
+ }
15163
+ });
15164
+ }
15165
+ catch (e) {
15166
+ // 忽略内联化错误
15167
+ if (!this.options.silentMode) {
15168
+ console.warn('📸 iOS 样式内联化失败:', e);
15169
+ }
15170
+ }
15171
+ }
15080
15172
  if (!this.options.silentMode) {
15081
15173
  const styleLinks = clonedDoc.querySelectorAll('link[rel="stylesheet"]').length;
15082
15174
  const styleTags = clonedDoc.querySelectorAll('style').length;
15083
- console.log(`📸 onclone: 已复制 ${styleLinks} 个样式表链接和 ${styleTags} 个内联样式标签`);
15175
+ console.log(`📸 onclone: 已复制 ${styleLinks} 个样式表链接和 ${styleTags} 个内联样式标签${isIOS ? ' (iOS 模式:已内联化计算样式)' : ''}`);
15084
15176
  }
15085
15177
  },
15086
15178
  // 性能优化
@@ -15206,389 +15298,514 @@ class ScreenshotManager {
15206
15298
  * - 页面资源较少
15207
15299
  */
15208
15300
  async takeScreenshotWithModernScreenshot(element) {
15301
+ // 检查是否有截图正在进行(防止并发冲突)
15302
+ // 如果正在进行,将请求加入队列,而不是直接拒绝
15303
+ if (this.isScreenshotInProgress) {
15304
+ // 队列最多保留 1 个请求,避免积压
15305
+ if (this.screenshotQueue.length >= 1) {
15306
+ if (!this.options.silentMode) {
15307
+ console.log('📸 截图队列已满,跳过当前请求(等待队列处理)');
15308
+ }
15309
+ // 等待队列中的请求完成
15310
+ return new Promise((resolve, reject) => {
15311
+ const checkQueue = () => {
15312
+ if (!this.isScreenshotInProgress && this.screenshotQueue.length === 0) {
15313
+ // 队列已清空,重新尝试
15314
+ this.takeScreenshotWithModernScreenshot(element).then(resolve).catch(reject);
15315
+ }
15316
+ else {
15317
+ setTimeout(checkQueue, 100); // 100ms 后再次检查
15318
+ }
15319
+ };
15320
+ checkQueue();
15321
+ });
15322
+ }
15323
+ // 将请求加入队列
15324
+ return new Promise((resolve, reject) => {
15325
+ this.screenshotQueue.push({ resolve: () => {
15326
+ this.takeScreenshotWithModernScreenshot(element).then(resolve).catch(reject);
15327
+ }, reject });
15328
+ // 启动队列处理(如果还没启动)
15329
+ if (!this.isProcessingQueue) {
15330
+ this.processScreenshotQueue();
15331
+ }
15332
+ });
15333
+ }
15334
+ this.isScreenshotInProgress = true;
15209
15335
  if (!this.options.silentMode) {
15210
15336
  console.log('📸 使用 modern-screenshot 引擎截图(Worker 模式)...');
15211
15337
  }
15212
- // 获取元素的实际尺寸(使用 scrollWidth/scrollHeight 获取完整内容尺寸)
15213
- // 对于 document.body,需要特殊处理,确保截取完整页面内容
15214
- let elementWidth;
15215
- let elementHeight;
15216
- if (element === document.body || element === document.documentElement) {
15217
- // 对于 body 或 html 元素,使用页面的完整尺寸(包括滚动内容)
15218
- elementWidth = Math.max(element.scrollWidth, element.offsetWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth, window.innerWidth);
15219
- elementHeight = Math.max(element.scrollHeight, element.offsetHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight, window.innerHeight);
15220
- }
15221
- else {
15222
- // 对于其他元素,使用元素的完整尺寸
15223
- elementWidth = element.scrollWidth || element.clientWidth || element.offsetWidth;
15224
- elementHeight = element.scrollHeight || element.clientHeight || element.offsetHeight;
15225
- }
15226
- if (!this.options.silentMode) {
15227
- console.log(`📸 目标元素: ${element.tagName}${element.id ? '#' + element.id : ''}${element.className ? '.' + element.className.split(' ').join('.') : ''}`);
15228
- console.log(`📸 元素尺寸: ${elementWidth}x${elementHeight}`);
15229
- console.log(`📸 scrollWidth: ${element.scrollWidth}, scrollHeight: ${element.scrollHeight}`);
15230
- console.log(`📸 clientWidth: ${element.clientWidth}, clientHeight: ${element.clientHeight}`);
15231
- console.log(`📸 offsetWidth: ${element.offsetWidth}, offsetHeight: ${element.offsetHeight}`);
15338
+ try {
15339
+ // 获取元素的实际尺寸(使用 scrollWidth/scrollHeight 获取完整内容尺寸)
15340
+ // 对于 document.body,需要特殊处理,确保截取完整页面内容
15341
+ let elementWidth;
15342
+ let elementHeight;
15232
15343
  if (element === document.body || element === document.documentElement) {
15233
- console.log(`📸 页面完整尺寸: ${document.documentElement.scrollWidth}x${document.documentElement.scrollHeight}`);
15234
- console.log(`📸 窗口尺寸: ${window.innerWidth}x${window.innerHeight}`);
15235
- }
15236
- }
15237
- const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
15238
- const isLowEndDevice = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;
15239
- // 进一步降低质量以减少 base64 大小
15240
- // 桌面设备:使用配置的质量(默认 0.3)
15241
- // 移动设备/低端设备:进一步降低到 0.2(最低)
15242
- const finalQuality = isMobile || isLowEndDevice
15243
- ? Math.max(this.options.quality * 0.65, 0.2) // 移动设备:质量 * 0.65,最低 0.2
15244
- : this.options.quality; // 桌面设备:使用配置的质量(默认 0.3)
15245
- // 计算压缩后的尺寸(对所有元素都应用,包括 document.body)
15246
- // 这样可以避免生成过大的截图,减少 base64 大小
15247
- const { width, height } = this.calculateCompressedSize(elementWidth, elementHeight, this.options.maxWidth, this.options.maxHeight);
15248
- // 对于所有元素都应用尺寸限制(包括 body),避免截图过大
15249
- // 如果计算后的尺寸小于元素实际尺寸,使用压缩尺寸;否则使用元素实际尺寸(但不超过最大值)
15250
- const finalWidth = width < elementWidth ? width : Math.min(elementWidth, this.options.maxWidth);
15251
- const finalHeight = height < elementHeight ? height : Math.min(elementHeight, this.options.maxHeight);
15252
- // 处理跨域图片的函数
15253
- const handleCrossOriginImage = async (url) => {
15254
- // 如果是 data URL 或 blob URL,直接返回
15255
- if (url.startsWith('data:') || url.startsWith('blob:')) {
15256
- return url;
15344
+ // 对于 body 或 html 元素,使用页面的完整尺寸(包括滚动内容)
15345
+ elementWidth = Math.max(element.scrollWidth, element.offsetWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth, window.innerWidth);
15346
+ elementHeight = Math.max(element.scrollHeight, element.offsetHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight, window.innerHeight);
15257
15347
  }
15258
- // 如果是同源图片,直接返回
15259
- try {
15260
- const imgUrl = new URL(url, window.location.href);
15261
- if (imgUrl.origin === window.location.origin) {
15262
- return url;
15263
- }
15348
+ else {
15349
+ // 对于其他元素,使用元素的完整尺寸
15350
+ elementWidth = element.scrollWidth || element.clientWidth || element.offsetWidth;
15351
+ elementHeight = element.scrollHeight || element.clientHeight || element.offsetHeight;
15264
15352
  }
15265
- catch (e) {
15266
- // URL 解析失败,继续处理
15353
+ if (!this.options.silentMode) {
15354
+ console.log(`📸 目标元素: ${element.tagName}${element.id ? '#' + element.id : ''}${element.className ? '.' + element.className.split(' ').join('.') : ''}`);
15355
+ console.log(`📸 元素尺寸: ${elementWidth}x${elementHeight}`);
15356
+ console.log(`📸 scrollWidth: ${element.scrollWidth}, scrollHeight: ${element.scrollHeight}`);
15357
+ console.log(`📸 clientWidth: ${element.clientWidth}, clientHeight: ${element.clientHeight}`);
15358
+ console.log(`📸 offsetWidth: ${element.offsetWidth}, offsetHeight: ${element.offsetHeight}`);
15359
+ if (element === document.body || element === document.documentElement) {
15360
+ console.log(`📸 页面完整尺寸: ${document.documentElement.scrollWidth}x${document.documentElement.scrollHeight}`);
15361
+ console.log(`📸 窗口尺寸: ${window.innerWidth}x${window.innerHeight}`);
15362
+ }
15267
15363
  }
15268
- // 如果配置了代理服务器,使用代理处理跨域图片
15269
- // 只有当 useProxy true proxyUrl 存在时才使用代理
15270
- const shouldUseProxy = this.options.useProxy && this.options.proxyUrl && this.options.proxyUrl.trim() !== '';
15271
- if (shouldUseProxy) {
15272
- // 检查内存缓存(优先使用缓存,带过期时间检查)
15273
- const cachedDataUrl = this.getCachedImage(url);
15274
- if (cachedDataUrl) {
15275
- if (!this.options.silentMode) {
15276
- console.log(`📸 使用内存缓存图片: ${url.substring(0, 50)}...`);
15364
+ const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
15365
+ const isLowEndDevice = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;
15366
+ // 进一步降低质量以减少 base64 大小
15367
+ // 桌面设备:使用配置的质量(默认 0.3)
15368
+ // 移动设备/低端设备:进一步降低到 0.2(最低)
15369
+ const finalQuality = isMobile || isLowEndDevice
15370
+ ? Math.max(this.options.quality * 0.65, 0.2) // 移动设备:质量 * 0.65,最低 0.2
15371
+ : this.options.quality; // 桌面设备:使用配置的质量(默认 0.3)
15372
+ // 计算压缩后的尺寸(对所有元素都应用,包括 document.body)
15373
+ // 这样可以避免生成过大的截图,减少 base64 大小
15374
+ const { width, height } = this.calculateCompressedSize(elementWidth, elementHeight, this.options.maxWidth, this.options.maxHeight);
15375
+ // 对于所有元素都应用尺寸限制(包括 body),避免截图过大
15376
+ // 如果计算后的尺寸小于元素实际尺寸,使用压缩尺寸;否则使用元素实际尺寸(但不超过最大值)
15377
+ const finalWidth = width < elementWidth ? width : Math.min(elementWidth, this.options.maxWidth);
15378
+ const finalHeight = height < elementHeight ? height : Math.min(elementHeight, this.options.maxHeight);
15379
+ // 处理跨域图片的函数
15380
+ const handleCrossOriginImage = async (url) => {
15381
+ // 如果是 data URL 或 blob URL,直接返回
15382
+ if (url.startsWith('data:') || url.startsWith('blob:')) {
15383
+ return url;
15384
+ }
15385
+ // 如果是同源图片,直接返回
15386
+ try {
15387
+ const imgUrl = new URL(url, window.location.href);
15388
+ if (imgUrl.origin === window.location.origin) {
15389
+ return url;
15277
15390
  }
15278
- return cachedDataUrl;
15279
15391
  }
15280
- // 检查 IndexedDB 缓存(如果启用)
15281
- if (this.options.useIndexedDB) {
15282
- const indexedDBCache = await this.getIndexedDBCache(url);
15283
- if (indexedDBCache) {
15284
- // 同步到内存缓存
15285
- this.setCachedImage(url, indexedDBCache);
15392
+ catch (e) {
15393
+ // URL 解析失败,继续处理
15394
+ }
15395
+ // 如果配置了代理服务器,使用代理处理跨域图片
15396
+ // 只有当 useProxy 为 true 且 proxyUrl 存在时才使用代理
15397
+ const shouldUseProxy = this.options.useProxy && this.options.proxyUrl && this.options.proxyUrl.trim() !== '';
15398
+ if (shouldUseProxy) {
15399
+ // 检查内存缓存(优先使用缓存,带过期时间检查)
15400
+ const cachedDataUrl = this.getCachedImage(url);
15401
+ if (cachedDataUrl) {
15286
15402
  if (!this.options.silentMode) {
15287
- console.log(`📸 ✅ 使用 IndexedDB 缓存图片: ${url.substring(0, 50)}...`);
15403
+ console.log(`📸 ✅ 使用内存缓存图片: ${url.substring(0, 50)}...`);
15288
15404
  }
15289
- return indexedDBCache;
15405
+ return cachedDataUrl;
15290
15406
  }
15291
- }
15292
- try {
15293
- // 构建代理请求参数
15294
- const params = new URLSearchParams({
15295
- url: url,
15296
- maxWidth: String(this.options.maxWidth || 1600),
15297
- maxHeight: String(this.options.maxHeight || 900),
15298
- quality: String(Math.round((this.options.quality || 0.4) * 100)),
15299
- format: this.options.outputFormat || 'webp'
15300
- });
15301
- let baseUrl = this.options.proxyUrl;
15302
- baseUrl = baseUrl.replace(/[?&]$/, '');
15303
- const proxyUrl = `${baseUrl}?${params.toString()}`;
15304
- // 请求代理服务器(优化:添加超时控制和优先级)
15305
- const controller = new AbortController();
15306
- const timeoutId = setTimeout(() => controller.abort(), this.options.imageLoadTimeout);
15307
- try {
15308
- const fetchOptions = {
15309
- method: 'GET',
15310
- mode: 'cors',
15311
- credentials: 'omit',
15312
- headers: {
15313
- 'Accept': 'image/*'
15314
- },
15315
- cache: 'no-cache',
15316
- signal: controller.signal
15317
- };
15318
- // 添加 fetch priority(如果支持)
15319
- if ('priority' in fetchOptions) {
15320
- fetchOptions.priority = this.options.fetchPriority;
15407
+ // 检查 IndexedDB 缓存(如果启用)
15408
+ if (this.options.useIndexedDB) {
15409
+ const indexedDBCache = await this.getIndexedDBCache(url);
15410
+ if (indexedDBCache) {
15411
+ // 同步到内存缓存
15412
+ this.setCachedImage(url, indexedDBCache);
15413
+ if (!this.options.silentMode) {
15414
+ console.log(`📸 使用 IndexedDB 缓存图片: ${url.substring(0, 50)}...`);
15415
+ }
15416
+ return indexedDBCache;
15321
15417
  }
15322
- const response = await fetch(proxyUrl, fetchOptions);
15323
- clearTimeout(timeoutId);
15324
- if (!response.ok) {
15325
- throw new Error(`代理请求失败: ${response.status}`);
15418
+ }
15419
+ try {
15420
+ // 构建代理请求参数
15421
+ const params = new URLSearchParams({
15422
+ url: url,
15423
+ maxWidth: String(this.options.maxWidth || 1600),
15424
+ maxHeight: String(this.options.maxHeight || 900),
15425
+ quality: String(Math.round((this.options.quality || 0.4) * 100)),
15426
+ format: this.options.outputFormat || 'webp'
15427
+ });
15428
+ let baseUrl = this.options.proxyUrl;
15429
+ baseUrl = baseUrl.replace(/[?&]$/, '');
15430
+ const proxyUrl = `${baseUrl}?${params.toString()}`;
15431
+ // 请求代理服务器(优化:添加超时控制和优先级)
15432
+ const controller = new AbortController();
15433
+ const timeoutId = setTimeout(() => controller.abort(), this.options.imageLoadTimeout);
15434
+ try {
15435
+ const fetchOptions = {
15436
+ method: 'GET',
15437
+ mode: 'cors',
15438
+ credentials: 'omit',
15439
+ headers: {
15440
+ 'Accept': 'image/*'
15441
+ },
15442
+ cache: 'no-cache',
15443
+ signal: controller.signal
15444
+ };
15445
+ // 添加 fetch priority(如果支持)
15446
+ if ('priority' in fetchOptions) {
15447
+ fetchOptions.priority = this.options.fetchPriority;
15448
+ }
15449
+ const response = await fetch(proxyUrl, fetchOptions);
15450
+ clearTimeout(timeoutId);
15451
+ if (!response.ok) {
15452
+ throw new Error(`代理请求失败: ${response.status}`);
15453
+ }
15454
+ const blob = await response.blob();
15455
+ const dataUrl = await this.blobToDataUrl(blob);
15456
+ // 缓存结果(带时间戳,10分钟有效)
15457
+ this.setCachedImage(url, dataUrl);
15458
+ // 如果启用 IndexedDB,也保存到 IndexedDB
15459
+ if (this.options.useIndexedDB) {
15460
+ await this.setIndexedDBCache(url, dataUrl);
15461
+ }
15462
+ return dataUrl;
15326
15463
  }
15327
- const blob = await response.blob();
15328
- const dataUrl = await this.blobToDataUrl(blob);
15329
- // 缓存结果(带时间戳,10分钟有效)
15330
- this.setCachedImage(url, dataUrl);
15331
- // 如果启用 IndexedDB,也保存到 IndexedDB
15332
- if (this.options.useIndexedDB) {
15333
- await this.setIndexedDBCache(url, dataUrl);
15464
+ catch (fetchError) {
15465
+ clearTimeout(timeoutId);
15466
+ throw fetchError;
15334
15467
  }
15335
- return dataUrl;
15336
15468
  }
15337
- catch (fetchError) {
15338
- clearTimeout(timeoutId);
15339
- throw fetchError;
15469
+ catch (error) {
15470
+ if (!this.options.silentMode) {
15471
+ console.warn(`📸 代理处理图片失败: ${url.substring(0, 100)}...`, error);
15472
+ }
15473
+ // 失败时返回原 URL
15474
+ return url;
15340
15475
  }
15341
15476
  }
15342
- catch (error) {
15343
- if (!this.options.silentMode) {
15344
- console.warn(`📸 代理处理图片失败: ${url.substring(0, 100)}...`, error);
15477
+ // 如果没有配置代理,需要添加内存保护机制
15478
+ // 不使用代理时,modern-screenshot 会直接下载图片,可能导致内存问题
15479
+ // 由于已配置 CORS,可以直接下载并检查大小
15480
+ if (this.options.enableCORS) {
15481
+ // 对于不使用代理的情况,添加内存保护和缓存机制:
15482
+ // 1. 先检查内存缓存(避免重复下载)
15483
+ // 2. 检查 IndexedDB 缓存
15484
+ // 3. 使用下载队列避免并发重复下载
15485
+ // 4. 下载时检查大小,如果过大则使用占位符
15486
+ // 先检查内存缓存(优先使用缓存,避免重复下载)
15487
+ const cachedDataUrl = this.getCachedImage(url);
15488
+ if (cachedDataUrl) {
15489
+ if (!this.options.silentMode) {
15490
+ console.log(`📸 ✅ 使用内存缓存图片(无代理模式): ${url.substring(0, 50)}...`);
15491
+ }
15492
+ return cachedDataUrl;
15345
15493
  }
15346
- // 失败时返回原 URL
15347
- return url;
15348
- }
15349
- }
15350
- // 如果没有配置代理,需要添加内存保护机制
15351
- // 不使用代理时,modern-screenshot 会直接下载图片,可能导致内存问题
15352
- // 由于已配置 CORS,可以直接下载并检查大小
15353
- if (this.options.enableCORS) {
15354
- // 对于不使用代理的情况,添加内存保护和缓存机制:
15355
- // 1. 先检查内存缓存(避免重复下载)
15356
- // 2. 检查 IndexedDB 缓存
15357
- // 3. 使用下载队列避免并发重复下载
15358
- // 4. 下载时检查大小,如果过大则使用占位符
15359
- // 先检查内存缓存(优先使用缓存,避免重复下载)
15360
- const cachedDataUrl = this.getCachedImage(url);
15361
- if (cachedDataUrl) {
15362
- if (!this.options.silentMode) {
15363
- console.log(`📸 ✅ 使用内存缓存图片(无代理模式): ${url.substring(0, 50)}...`);
15494
+ // 检查 IndexedDB 缓存(如果启用)
15495
+ if (this.options.useIndexedDB) {
15496
+ const indexedDBCache = await this.getIndexedDBCache(url);
15497
+ if (indexedDBCache) {
15498
+ // 同步到内存缓存
15499
+ this.setCachedImage(url, indexedDBCache);
15500
+ if (!this.options.silentMode) {
15501
+ console.log(`📸 ✅ 使用 IndexedDB 缓存图片(无代理模式): ${url.substring(0, 50)}...`);
15502
+ }
15503
+ return indexedDBCache;
15504
+ }
15364
15505
  }
15365
- return cachedDataUrl;
15366
- }
15367
- // 检查 IndexedDB 缓存(如果启用)
15368
- if (this.options.useIndexedDB) {
15369
- const indexedDBCache = await this.getIndexedDBCache(url);
15370
- if (indexedDBCache) {
15371
- // 同步到内存缓存
15372
- this.setCachedImage(url, indexedDBCache);
15506
+ // 检查是否正在下载(避免重复下载)
15507
+ if (this.imageDownloadQueue.has(url)) {
15508
+ // 如果已经在下载队列中,等待现有下载完成
15373
15509
  if (!this.options.silentMode) {
15374
- console.log(`📸 使用 IndexedDB 缓存图片(无代理模式): ${url.substring(0, 50)}...`);
15510
+ console.log(`📸 等待图片下载完成: ${url.substring(0, 50)}...`);
15375
15511
  }
15376
- return indexedDBCache;
15512
+ return await this.imageDownloadQueue.get(url);
15377
15513
  }
15378
- }
15379
- // 检查是否正在下载(避免重复下载)
15380
- if (this.imageDownloadQueue.has(url)) {
15381
- // 如果已经在下载队列中,等待现有下载完成
15382
- if (!this.options.silentMode) {
15383
- console.log(`📸 ⏳ 等待图片下载完成: ${url.substring(0, 50)}...`);
15514
+ // 检查并发下载数限制
15515
+ if (this.activeDownloads.size >= this.maxConcurrentImageDownloads) {
15516
+ // 并发数已满,返回原 URL,让 modern-screenshot 自己处理(可能会失败,但不阻塞)
15517
+ if (!this.options.silentMode) {
15518
+ console.warn(`📸 ⚠️ 并发下载数已满(${this.activeDownloads.size}/${this.maxConcurrentImageDownloads}),跳过: ${url.substring(0, 50)}...`);
15519
+ }
15520
+ return url;
15384
15521
  }
15385
- return await this.imageDownloadQueue.get(url);
15386
- }
15387
- // 检查并发下载数限制
15388
- if (this.activeDownloads.size >= this.maxConcurrentImageDownloads) {
15389
- // 并发数已满,返回原 URL,让 modern-screenshot 自己处理(可能会失败,但不阻塞)
15390
- if (!this.options.silentMode) {
15391
- console.warn(`📸 ⚠️ 并发下载数已满(${this.activeDownloads.size}/${this.maxConcurrentImageDownloads}),跳过: ${url.substring(0, 50)}...`);
15522
+ // 创建下载 Promise 并加入队列
15523
+ const downloadPromise = this.downloadImageWithoutProxy(url);
15524
+ this.imageDownloadQueue.set(url, downloadPromise);
15525
+ this.activeDownloads.add(url);
15526
+ try {
15527
+ const result = await downloadPromise;
15528
+ return result;
15529
+ }
15530
+ finally {
15531
+ // 下载完成后清理
15532
+ this.imageDownloadQueue.delete(url);
15533
+ this.activeDownloads.delete(url);
15392
15534
  }
15393
- return url;
15394
- }
15395
- // 创建下载 Promise 并加入队列
15396
- const downloadPromise = this.downloadImageWithoutProxy(url);
15397
- this.imageDownloadQueue.set(url, downloadPromise);
15398
- this.activeDownloads.add(url);
15399
- try {
15400
- const result = await downloadPromise;
15401
- return result;
15402
- }
15403
- finally {
15404
- // 下载完成后清理
15405
- this.imageDownloadQueue.delete(url);
15406
- this.activeDownloads.delete(url);
15407
15535
  }
15536
+ // 默认返回原 URL
15537
+ return url;
15538
+ };
15539
+ // 检查元素是否可见且有尺寸
15540
+ const rect = element.getBoundingClientRect();
15541
+ if (rect.width === 0 || rect.height === 0) {
15542
+ throw new Error('元素尺寸为 0,无法截图');
15408
15543
  }
15409
- // 默认返回原 URL
15410
- return url;
15411
- };
15412
- // 检查元素是否可见且有尺寸
15413
- const rect = element.getBoundingClientRect();
15414
- if (rect.width === 0 || rect.height === 0) {
15415
- throw new Error('元素尺寸为 0,无法截图');
15416
- }
15417
- // 每次截图都重新创建 context,确保使用最新的元素状态
15418
- // 如果已有 context,先清理
15419
- if (this.screenshotContext) {
15420
- try {
15421
- destroyContext(this.screenshotContext);
15544
+ // Worker 数量配置:智能计算或使用用户配置
15545
+ // workerNumber > 0 会启用 Worker 模式,截图处理在后台线程执行,不会阻塞主线程 UI
15546
+ // 如果用户指定了 workerNumber,直接使用;否则根据设备性能自动计算
15547
+ let workerNumber;
15548
+ if (this.options.workerNumber !== undefined && this.options.workerNumber > 0) {
15549
+ // 用户明确指定了 workerNumber
15550
+ workerNumber = this.options.workerNumber;
15422
15551
  }
15423
- catch (e) {
15424
- // 忽略清理错误
15552
+ else {
15553
+ // 自动计算 workerNumber
15554
+ const cpuCores = navigator.hardwareConcurrency || 4; // 默认假设 4 核
15555
+ if (isMobile || isLowEndDevice) {
15556
+ // 移动设备/低端设备:使用 1 个 Worker(避免内存压力)
15557
+ workerNumber = 1;
15558
+ }
15559
+ else if (cpuCores >= 8) {
15560
+ // 高性能设备(8核及以上):使用 3-4 个 Worker(充分利用多核)
15561
+ // 但根据截图间隔调整:频繁截图(间隔 < 2秒)时使用更多 Worker
15562
+ const isFrequentScreenshot = this.options.interval < 2000;
15563
+ workerNumber = isFrequentScreenshot ? Math.min(4, Math.floor(cpuCores / 2)) : 3;
15564
+ }
15565
+ else if (cpuCores >= 4) {
15566
+ // 中等性能设备(4-7核):使用 2 个 Worker
15567
+ workerNumber = 2;
15568
+ }
15569
+ else {
15570
+ // 低性能设备(< 4核):使用 1 个 Worker
15571
+ workerNumber = 1;
15572
+ }
15425
15573
  }
15426
- this.screenshotContext = null;
15427
- }
15428
- // Worker 数量配置:移动设备/低端设备使用 1 个 Worker,桌面设备使用 2 个
15429
- // workerNumber > 0 会启用 Worker 模式,截图处理在后台线程执行,不会阻塞主线程 UI
15430
- const workerNumber = isMobile || isLowEndDevice ? 1 : 2;
15431
- // 构建 createContext 配置
15432
- // 参考: https://github.com/qq15725/modern-screenshot/blob/main/src/options.ts
15433
- const contextOptions = {
15434
- workerNumber, // Worker 数量,> 0 启用 Worker 模式
15435
- quality: finalQuality, // 图片质量(0-1),已优化为更低的值以减少 base64 大小
15436
- fetchFn: handleCrossOriginImage, // 使用代理服务器处理跨域图片
15437
- fetch: {
15438
- requestInit: {
15439
- cache: 'no-cache',
15574
+ // 限制 workerNumber 范围:1-8(避免过多 Worker 导致资源竞争)
15575
+ workerNumber = Math.max(1, Math.min(8, workerNumber));
15576
+ // 构建 createContext 配置
15577
+ // 参考: https://github.com/qq15725/modern-screenshot/blob/main/src/options.ts
15578
+ const contextOptions = {
15579
+ workerNumber, // Worker 数量,> 0 启用 Worker 模式
15580
+ quality: finalQuality, // 图片质量(0-1),已优化为更低的值以减少 base64 大小
15581
+ fetchFn: handleCrossOriginImage, // 使用代理服务器处理跨域图片
15582
+ fetch: {
15583
+ requestInit: {
15584
+ cache: 'no-cache',
15585
+ },
15586
+ bypassingCache: true,
15440
15587
  },
15441
- bypassingCache: true,
15442
- },
15443
- // 设置最大 canvas 尺寸,防止生成过大的 canvas(避免内存问题)
15444
- // 参考: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
15445
- // 大多数浏览器限制为 16,777,216 像素(4096x4096),这里设置为更保守的值
15446
- maximumCanvasSize: 16777216, // 16M 像素(约 4096x4096)
15447
- };
15448
- // 对所有元素都设置尺寸限制(包括 document.body),避免截图过大
15449
- // 这样可以减少 base64 大小,提高性能
15450
- if (finalWidth && finalHeight) {
15451
- contextOptions.width = finalWidth;
15452
- contextOptions.height = finalHeight;
15453
- if (!this.options.silentMode) {
15454
- if (element === document.body || element === document.documentElement) {
15455
- console.log(`📸 截取完整页面(document.body),使用压缩尺寸: ${finalWidth}x${finalHeight}`);
15588
+ // 设置最大 canvas 尺寸,防止生成过大的 canvas(避免内存问题)
15589
+ // 参考: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
15590
+ // 大多数浏览器限制为 16,777,216 像素(4096x4096),这里设置为更保守的值
15591
+ maximumCanvasSize: 16777216, // 16M 像素(约 4096x4096)
15592
+ // 使用 modern-screenshot 内置的 timeout(更可靠)
15593
+ timeout: Math.max(this.options.interval * 6, 5000),
15594
+ };
15595
+ // 限制 timeout 最多 15 秒
15596
+ contextOptions.timeout = Math.min(contextOptions.timeout, 15000);
15597
+ // 如果用户指定了 workerUrl,使用指定的 URL
15598
+ // 否则让 modern-screenshot 自动处理(它会尝试从 node_modules 或 CDN 加载)
15599
+ // 注意:在某些构建工具(如 Rollup)中,可能需要手动指定 workerUrl
15600
+ if (this.options.workerUrl) {
15601
+ contextOptions.workerUrl = this.options.workerUrl;
15602
+ if (!this.options.silentMode) {
15603
+ console.log(`📸 使用指定的 Worker URL: ${this.options.workerUrl}`);
15456
15604
  }
15457
- else {
15458
- console.log(`📸 使用压缩尺寸: ${finalWidth}x${finalHeight}`);
15605
+ }
15606
+ else {
15607
+ // 未指定 workerUrl 时,modern-screenshot 会自动处理
15608
+ // 但在某些构建环境中可能需要手动指定,可以使用 CDN 作为后备
15609
+ // 这里不设置 workerUrl,让 modern-screenshot 自己处理
15610
+ if (!this.options.silentMode) {
15611
+ console.log('📸 Worker URL 未指定,modern-screenshot 将自动处理');
15459
15612
  }
15460
15613
  }
15461
- }
15462
- else {
15463
- if (!this.options.silentMode) {
15464
- console.log(`📸 使用元素实际尺寸: ${elementWidth}x${elementHeight}`);
15614
+ // 对所有元素都设置尺寸限制(包括 document.body),避免截图过大
15615
+ // 这样可以减少 base64 大小,提高性能
15616
+ if (finalWidth && finalHeight) {
15617
+ contextOptions.width = finalWidth;
15618
+ contextOptions.height = finalHeight;
15619
+ if (!this.options.silentMode) {
15620
+ if (element === document.body || element === document.documentElement) {
15621
+ console.log(`📸 截取完整页面(document.body),使用压缩尺寸: ${finalWidth}x${finalHeight}`);
15622
+ }
15623
+ else {
15624
+ console.log(`📸 使用压缩尺寸: ${finalWidth}x${finalHeight}`);
15625
+ }
15626
+ }
15465
15627
  }
15466
- }
15467
- // 缩放配置:移动设备使用更低的缩放比例,进一步减少图片大小
15468
- // scale < 1 会降低图片分辨率,减少 base64 大小
15469
- if (this.options.scale !== 1) {
15470
- contextOptions.scale = isMobile ? 0.7 : this.options.scale; // 移动设备:0.8 -> 0.7
15471
- }
15472
- else if (isMobile) {
15473
- // 如果未指定 scale,移动设备默认使用 0.7
15474
- contextOptions.scale = 0.7;
15475
- }
15476
- // modern-screenshot 会自动处理 worker URL,不需要手动设置 workerUrl
15477
- // 当 workerNumber > 0 时,截图处理会在 Worker 线程中执行,不会阻塞主线程 UI
15478
- // 创建 Worker 上下文(每次截图都创建新的,确保元素状态最新)
15479
- if (!this.options.silentMode) {
15480
- console.log(`📸 Worker 模式: ${workerNumber} 个 Worker,质量: ${finalQuality.toFixed(2)},缩放: ${contextOptions.scale || 1}`);
15481
- }
15482
- this.screenshotContext = await createContext$1(element, contextOptions);
15483
- try {
15484
- // 使用 Worker 上下文进行截图
15485
- const dataUrl = await domToPng(this.screenshotContext);
15486
- // 验证截图结果
15487
- if (!dataUrl || dataUrl.length < 100) {
15488
- throw new Error('生成的截图数据无效或过短');
15628
+ else {
15629
+ if (!this.options.silentMode) {
15630
+ console.log(`📸 使用元素实际尺寸: ${elementWidth}x${elementHeight}`);
15631
+ }
15489
15632
  }
15490
- // 根据输出格式转换
15491
- if (this.options.outputFormat !== 'png') {
15492
- // modern-screenshot 默认输出 PNG,如果需要其他格式,需要转换
15493
- const canvas = document.createElement('canvas');
15494
- const ctx = canvas.getContext('2d');
15495
- if (!ctx) {
15496
- throw new Error('无法获取 canvas context');
15633
+ // 缩放配置:移动设备使用更低的缩放比例,进一步减少图片大小
15634
+ // scale < 1 会降低图片分辨率,减少 base64 大小
15635
+ if (this.options.scale !== 1) {
15636
+ contextOptions.scale = isMobile ? 0.7 : this.options.scale; // 移动设备:0.8 -> 0.7
15637
+ }
15638
+ else if (isMobile) {
15639
+ // 如果未指定 scale,移动设备默认使用 0.7
15640
+ contextOptions.scale = 0.7;
15641
+ }
15642
+ // 优化:复用 context,避免频繁创建和销毁(性能提升 20%+)
15643
+ // 只在元素变化或配置变化时重新创建 context
15644
+ const contextOptionsHash = JSON.stringify({
15645
+ workerNumber,
15646
+ quality: finalQuality,
15647
+ scale: contextOptions.scale,
15648
+ width: contextOptions.width,
15649
+ height: contextOptions.height,
15650
+ maximumCanvasSize: contextOptions.maximumCanvasSize,
15651
+ timeout: contextOptions.timeout
15652
+ });
15653
+ const needsRecreateContext = !this.screenshotContext ||
15654
+ this.contextElement !== element ||
15655
+ this.contextOptionsHash !== contextOptionsHash;
15656
+ if (needsRecreateContext) {
15657
+ if (!this.options.silentMode) {
15658
+ if (this.screenshotContext) {
15659
+ console.log('📸 检测到元素或配置变化,重新创建 context...');
15660
+ }
15661
+ else {
15662
+ console.log(`📸 Worker 模式: ${workerNumber} 个 Worker,质量: ${finalQuality.toFixed(2)},缩放: ${contextOptions.scale || 1}`);
15663
+ }
15497
15664
  }
15498
- const img = new Image();
15499
- let convertedDataUrl;
15500
- try {
15501
- await new Promise((resolve, reject) => {
15502
- img.onload = () => {
15503
- canvas.width = img.width;
15504
- canvas.height = img.height;
15505
- ctx.drawImage(img, 0, 0);
15506
- resolve();
15507
- };
15508
- img.onerror = reject;
15509
- img.src = dataUrl;
15510
- });
15511
- let mimeType = 'image/jpeg';
15512
- // 使用与 createContext 相同的质量设置
15513
- let conversionQuality = finalQuality;
15514
- if (this.options.outputFormat === 'webp' && !isMobile) {
15515
- try {
15516
- const testCanvas = document.createElement('canvas');
15517
- testCanvas.width = 1;
15518
- testCanvas.height = 1;
15519
- const testDataUrl = testCanvas.toDataURL('image/webp');
15520
- if (testDataUrl.indexOf('webp') !== -1) {
15521
- mimeType = 'image/webp';
15665
+ // 销毁旧 context
15666
+ if (this.screenshotContext) {
15667
+ try {
15668
+ destroyContext(this.screenshotContext);
15669
+ }
15670
+ catch (e) {
15671
+ // 忽略清理错误
15672
+ }
15673
+ this.screenshotContext = null;
15674
+ }
15675
+ // 添加 progress 回调(可选,用于显示进度)
15676
+ if (!this.options.silentMode) {
15677
+ contextOptions.progress = (current, total) => {
15678
+ if (total > 0) {
15679
+ const percent = Math.round((current / total) * 100);
15680
+ if (percent % 25 === 0 || current === total) { // 每 25% 或完成时打印
15681
+ console.log(`📸 截图进度: ${current}/${total} (${percent}%)`);
15522
15682
  }
15523
15683
  }
15524
- catch {
15525
- mimeType = 'image/jpeg';
15684
+ };
15685
+ }
15686
+ // 添加重试机制创建新 context
15687
+ let retries = 0;
15688
+ const maxRetries = this.options.maxRetries || 2;
15689
+ while (retries <= maxRetries) {
15690
+ try {
15691
+ this.screenshotContext = await createContext$1(element, contextOptions);
15692
+ this.contextElement = element;
15693
+ this.contextOptionsHash = contextOptionsHash;
15694
+ break;
15695
+ }
15696
+ catch (error) {
15697
+ if (retries === maxRetries) {
15698
+ throw new Error(`创建截图上下文失败(已重试 ${maxRetries} 次): ${error instanceof Error ? error.message : String(error)}`);
15699
+ }
15700
+ retries++;
15701
+ const delay = 1000 * retries; // 递增延迟:1秒、2秒...
15702
+ if (!this.options.silentMode) {
15703
+ console.warn(`📸 ⚠️ 创建截图上下文失败,${delay}ms 后重试 (${retries}/${maxRetries})...`);
15526
15704
  }
15705
+ await new Promise(resolve => setTimeout(resolve, delay));
15527
15706
  }
15528
- // 使用优化后的质量进行格式转换
15529
- convertedDataUrl = mimeType === 'image/png'
15530
- ? canvas.toDataURL(mimeType)
15531
- : canvas.toDataURL(mimeType, conversionQuality);
15532
15707
  }
15533
- finally {
15534
- // 清理资源,释放内存
15535
- img.src = ''; // 清除图片引用
15536
- img.onload = null;
15537
- img.onerror = null;
15538
- canvas.width = 0; // 清空 canvas
15539
- canvas.height = 0;
15540
- ctx.clearRect(0, 0, 0, 0); // 清除绘制内容
15708
+ }
15709
+ else {
15710
+ if (!this.options.silentMode) {
15711
+ console.log('📸 复用现有 context(性能优化)');
15541
15712
  }
15542
- return convertedDataUrl;
15543
15713
  }
15544
- return dataUrl;
15714
+ try {
15715
+ // 根据输出格式选择对应的 API,避免格式转换(性能优化)
15716
+ // 注意:timeout 已经在 createContext 时设置,modern-screenshot 内部会处理超时
15717
+ let dataUrl;
15718
+ const outputFormat = this.options.outputFormat || 'webp';
15719
+ if (!this.options.silentMode) {
15720
+ console.log(`📸 使用 ${outputFormat.toUpperCase()} 格式截图(直接输出,无需转换)...`);
15721
+ }
15722
+ // 根据输出格式选择对应的 API
15723
+ // modern-screenshot 内部已经处理了超时,不需要额外的 Promise.race
15724
+ if (outputFormat === 'webp') {
15725
+ // 使用 domToWebp,直接输出 WebP 格式,无需转换
15726
+ dataUrl = await domToWebp(this.screenshotContext);
15727
+ }
15728
+ else if (outputFormat === 'jpeg') {
15729
+ // 使用 domToJpeg,直接输出 JPEG 格式,无需转换
15730
+ dataUrl = await domToJpeg(this.screenshotContext);
15731
+ }
15732
+ else {
15733
+ // 默认使用 domToPng
15734
+ dataUrl = await domToPng(this.screenshotContext);
15735
+ }
15736
+ // 验证截图结果
15737
+ if (!dataUrl || dataUrl.length < 100) {
15738
+ throw new Error('生成的截图数据无效或过短');
15739
+ }
15740
+ if (!this.options.silentMode) {
15741
+ console.log(`📸 ✅ modern-screenshot 截图成功(${outputFormat.toUpperCase()} 格式,直接输出,无需转换)`);
15742
+ }
15743
+ return dataUrl;
15744
+ }
15745
+ catch (error) {
15746
+ const errorMessage = error instanceof Error ? error.message : String(error);
15747
+ if (!this.options.silentMode) {
15748
+ console.error('📸 modern-screenshot 截图失败:', errorMessage);
15749
+ console.error('📸 元素信息:', {
15750
+ width: rect.width,
15751
+ height: rect.height,
15752
+ scrollWidth: element.scrollWidth,
15753
+ scrollHeight: element.scrollHeight,
15754
+ display: window.getComputedStyle(element).display,
15755
+ visibility: window.getComputedStyle(element).visibility
15756
+ });
15757
+ }
15758
+ throw error;
15759
+ }
15760
+ finally {
15761
+ // 优化:不复用 context 时才清理(性能优化)
15762
+ // 如果元素或配置没有变化,保留 context 以便下次复用
15763
+ // 这样可以避免频繁创建和销毁 Worker,提升性能 20%+
15764
+ // 释放截图锁
15765
+ this.isScreenshotInProgress = false;
15766
+ }
15545
15767
  }
15546
15768
  catch (error) {
15769
+ // 外层错误处理:确保即使发生错误也释放锁
15547
15770
  const errorMessage = error instanceof Error ? error.message : String(error);
15548
15771
  if (!this.options.silentMode) {
15549
- console.error('📸 modern-screenshot 截图失败:', errorMessage);
15550
- console.error('📸 元素信息:', {
15551
- width: rect.width,
15552
- height: rect.height,
15553
- scrollWidth: element.scrollWidth,
15554
- scrollHeight: element.scrollHeight,
15555
- display: window.getComputedStyle(element).display,
15556
- visibility: window.getComputedStyle(element).visibility
15557
- });
15772
+ console.error('📸 modern-screenshot 截图异常:', errorMessage);
15558
15773
  }
15559
15774
  throw error;
15560
15775
  }
15561
15776
  finally {
15562
- // 每次截图后立即清理 context,释放 Worker 和内存
15563
- // 这是防止内存泄漏的关键步骤
15564
- if (this.screenshotContext) {
15565
- try {
15566
- destroyContext(this.screenshotContext);
15567
- if (!this.options.silentMode) {
15568
- console.log('📸 ✅ modern-screenshot context 已清理');
15569
- }
15570
- }
15571
- catch (e) {
15572
- if (!this.options.silentMode) {
15573
- console.warn('📸 ⚠️ 清理 context 失败:', e);
15574
- }
15575
- }
15576
- finally {
15577
- // 确保 context 引用被清除
15578
- this.screenshotContext = null;
15579
- }
15777
+ // 确保截图锁被释放(即使发生未捕获的错误)
15778
+ if (this.isScreenshotInProgress) {
15779
+ this.isScreenshotInProgress = false;
15580
15780
  }
15581
- // 强制触发垃圾回收(如果可能)
15582
- // 注意:这需要浏览器支持,不是所有浏览器都有效
15583
- if (typeof window !== 'undefined' && window.gc && typeof window.gc === 'function') {
15781
+ // 处理队列中的下一个请求
15782
+ this.processScreenshotQueue();
15783
+ }
15784
+ }
15785
+ /**
15786
+ * 处理截图队列
15787
+ */
15788
+ async processScreenshotQueue() {
15789
+ if (this.isProcessingQueue || this.screenshotQueue.length === 0) {
15790
+ return;
15791
+ }
15792
+ this.isProcessingQueue = true;
15793
+ while (this.screenshotQueue.length > 0 && !this.isScreenshotInProgress) {
15794
+ const task = this.screenshotQueue.shift();
15795
+ if (task) {
15584
15796
  try {
15585
- window.gc();
15797
+ task.resolve();
15798
+ // 等待当前截图完成
15799
+ while (this.isScreenshotInProgress) {
15800
+ await new Promise(resolve => setTimeout(resolve, 50));
15801
+ }
15586
15802
  }
15587
- catch {
15588
- // 忽略 GC 错误
15803
+ catch (error) {
15804
+ task.reject(error instanceof Error ? error : new Error(String(error)));
15589
15805
  }
15590
15806
  }
15591
15807
  }
15808
+ this.isProcessingQueue = false;
15592
15809
  }
15593
15810
  /**
15594
15811
  * 预连接代理服务器(优化网络性能)
@@ -16462,6 +16679,18 @@ class ScreenshotManager {
16462
16679
  * 清理资源
16463
16680
  */
16464
16681
  destroy() {
16682
+ // 清理 modern-screenshot context
16683
+ if (this.screenshotContext) {
16684
+ try {
16685
+ destroyContext(this.screenshotContext);
16686
+ }
16687
+ catch (e) {
16688
+ // 忽略清理错误
16689
+ }
16690
+ this.screenshotContext = null;
16691
+ this.contextElement = null;
16692
+ this.contextOptionsHash = '';
16693
+ }
16465
16694
  this.stopScreenshot();
16466
16695
  if (this.worker) {
16467
16696
  this.worker.terminate();