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.
- package/dist/core/ScreenshotManager.d.ts +11 -0
- package/dist/core/ScreenshotManager.d.ts.map +1 -1
- package/dist/customer-sdk.cjs.js +583 -354
- package/dist/customer-sdk.esm.js +583 -354
- package/dist/customer-sdk.min.js +2 -2
- package/dist/types/index.d.ts +2 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/customer-sdk.esm.js
CHANGED
|
@@ -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 ??
|
|
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
|
-
//
|
|
14391
|
-
if (this.targetElement !== element
|
|
14392
|
-
|
|
14393
|
-
|
|
14394
|
-
|
|
14395
|
-
|
|
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
|
-
|
|
14653
|
+
// 设置定时器(使用递归 setTimeout,确保等待前一个完成)
|
|
14654
|
+
// 这样可以避免 setInterval 不等待异步完成的问题
|
|
14655
|
+
const scheduleNext = async () => {
|
|
14628
14656
|
if (this.isRunning && this.isEnabled && !document.hidden) {
|
|
14629
|
-
|
|
14630
|
-
|
|
14631
|
-
|
|
14632
|
-
|
|
14633
|
-
|
|
14634
|
-
|
|
14635
|
-
.
|
|
14636
|
-
|
|
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
|
-
|
|
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
|
-
//
|
|
14990
|
-
//
|
|
14991
|
-
onclone: (clonedDoc,
|
|
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
|
-
|
|
15213
|
-
|
|
15214
|
-
|
|
15215
|
-
|
|
15216
|
-
|
|
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
|
-
|
|
15234
|
-
|
|
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
|
-
|
|
15260
|
-
|
|
15261
|
-
|
|
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
|
-
|
|
15266
|
-
|
|
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
|
-
|
|
15270
|
-
|
|
15271
|
-
|
|
15272
|
-
|
|
15273
|
-
|
|
15274
|
-
|
|
15275
|
-
|
|
15276
|
-
|
|
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
|
-
|
|
15281
|
-
|
|
15282
|
-
|
|
15283
|
-
|
|
15284
|
-
|
|
15285
|
-
|
|
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(`📸 ✅
|
|
15403
|
+
console.log(`📸 ✅ 使用内存缓存图片: ${url.substring(0, 50)}...`);
|
|
15288
15404
|
}
|
|
15289
|
-
return
|
|
15405
|
+
return cachedDataUrl;
|
|
15290
15406
|
}
|
|
15291
|
-
|
|
15292
|
-
|
|
15293
|
-
|
|
15294
|
-
|
|
15295
|
-
|
|
15296
|
-
|
|
15297
|
-
|
|
15298
|
-
|
|
15299
|
-
|
|
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
|
-
|
|
15323
|
-
|
|
15324
|
-
|
|
15325
|
-
|
|
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
|
-
|
|
15328
|
-
|
|
15329
|
-
|
|
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 (
|
|
15338
|
-
|
|
15339
|
-
|
|
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
|
-
|
|
15343
|
-
|
|
15344
|
-
|
|
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
|
-
//
|
|
15347
|
-
|
|
15348
|
-
|
|
15349
|
-
|
|
15350
|
-
|
|
15351
|
-
|
|
15352
|
-
|
|
15353
|
-
|
|
15354
|
-
|
|
15355
|
-
|
|
15356
|
-
|
|
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
|
-
|
|
15366
|
-
|
|
15367
|
-
|
|
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(`📸
|
|
15510
|
+
console.log(`📸 ⏳ 等待图片下载完成: ${url.substring(0, 50)}...`);
|
|
15375
15511
|
}
|
|
15376
|
-
return
|
|
15512
|
+
return await this.imageDownloadQueue.get(url);
|
|
15377
15513
|
}
|
|
15378
|
-
|
|
15379
|
-
|
|
15380
|
-
|
|
15381
|
-
|
|
15382
|
-
|
|
15383
|
-
|
|
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
|
-
|
|
15386
|
-
|
|
15387
|
-
|
|
15388
|
-
|
|
15389
|
-
|
|
15390
|
-
|
|
15391
|
-
|
|
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
|
-
//
|
|
15410
|
-
|
|
15411
|
-
|
|
15412
|
-
|
|
15413
|
-
|
|
15414
|
-
|
|
15415
|
-
|
|
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
|
-
|
|
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
|
-
|
|
15427
|
-
|
|
15428
|
-
|
|
15429
|
-
|
|
15430
|
-
|
|
15431
|
-
|
|
15432
|
-
|
|
15433
|
-
|
|
15434
|
-
|
|
15435
|
-
|
|
15436
|
-
|
|
15437
|
-
|
|
15438
|
-
|
|
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
|
-
|
|
15442
|
-
|
|
15443
|
-
|
|
15444
|
-
|
|
15445
|
-
|
|
15446
|
-
|
|
15447
|
-
|
|
15448
|
-
|
|
15449
|
-
|
|
15450
|
-
|
|
15451
|
-
|
|
15452
|
-
|
|
15453
|
-
if (
|
|
15454
|
-
|
|
15455
|
-
|
|
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
|
-
|
|
15458
|
-
|
|
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
|
-
|
|
15463
|
-
if (
|
|
15464
|
-
|
|
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
|
-
|
|
15469
|
-
|
|
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
|
-
|
|
15492
|
-
|
|
15493
|
-
|
|
15494
|
-
|
|
15495
|
-
|
|
15496
|
-
|
|
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
|
-
|
|
15499
|
-
|
|
15500
|
-
|
|
15501
|
-
|
|
15502
|
-
|
|
15503
|
-
|
|
15504
|
-
|
|
15505
|
-
|
|
15506
|
-
|
|
15507
|
-
|
|
15508
|
-
|
|
15509
|
-
|
|
15510
|
-
|
|
15511
|
-
|
|
15512
|
-
|
|
15513
|
-
|
|
15514
|
-
|
|
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
|
-
|
|
15525
|
-
|
|
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
|
-
|
|
15534
|
-
|
|
15535
|
-
|
|
15536
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
//
|
|
15563
|
-
|
|
15564
|
-
|
|
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
|
-
|
|
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
|
-
|
|
15797
|
+
task.resolve();
|
|
15798
|
+
// 等待当前截图完成
|
|
15799
|
+
while (this.isScreenshotInProgress) {
|
|
15800
|
+
await new Promise(resolve => setTimeout(resolve, 50));
|
|
15801
|
+
}
|
|
15586
15802
|
}
|
|
15587
|
-
catch {
|
|
15588
|
-
|
|
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();
|