diff --git a/public/static/js/phone-image.js b/public/static/js/phone-image.js
index dc35539..a0b44a3 100644
--- a/public/static/js/phone-image.js
+++ b/public/static/js/phone-image.js
@@ -702,17 +702,23 @@ var PhoneImageEngine = (function () {
var $staging = $('#render-staging');
$staging.empty();
- // 渲染所有页面到隐藏区域
+ // 渲染所有页面到隐藏区域(使用wrapper以便html2canvas正确渲染)
+ var sizeClass = 'size-' + config.size;
+ var $wrapper = $('
');
for (var i = 0; i < pages.length; i++) {
- $staging.append(pages[i].html);
+ $wrapper.append(pages[i].html);
}
+ $staging.append($wrapper);
// 等待一帧确保 DOM 渲染完成
requestAnimationFrame(function () {
+ // html2canvas会跳过visibility:hidden的元素,临时切换为可见
+ $staging.css({ visibility: 'visible' });
// 先转换代码块为图片
convertCodeBlocks().then(function () {
var $pageElems = $staging.find('.phone-image-page');
if ($pageElems.length === 0) {
+ $staging.css({ visibility: 'hidden' });
displayThumbnails([], sizeConfig);
deferred.resolve(pages);
return;
@@ -726,6 +732,7 @@ var PhoneImageEngine = (function () {
function captureNext() {
if (idx >= total) {
$staging.empty();
+ $staging.css({ visibility: 'hidden' });
displayThumbnails(thumbnailDataUrls, sizeConfig);
deferred.resolve(pages);
return;
@@ -744,6 +751,7 @@ var PhoneImageEngine = (function () {
idx++;
captureNext();
}).catch(function (err) {
+ $staging.css({ visibility: 'hidden' });
deferred.reject('截图失败(第' + (idx + 1) + '页): ' + err);
});
}
@@ -753,6 +761,7 @@ var PhoneImageEngine = (function () {
// 代码块转换失败,继续截图流程
var $pageElems = $staging.find('.phone-image-page');
if ($pageElems.length === 0) {
+ $staging.css({ visibility: 'hidden' });
displayThumbnails([], sizeConfig);
deferred.resolve(pages);
return;
@@ -765,6 +774,7 @@ var PhoneImageEngine = (function () {
function captureNext() {
if (idx >= total) {
$staging.empty();
+ $staging.css({ visibility: 'hidden' });
displayThumbnails(thumbnailDataUrls, sizeConfig);
deferred.resolve(pages);
return;
@@ -783,6 +793,7 @@ var PhoneImageEngine = (function () {
idx++;
captureNext();
}).catch(function (err) {
+ $staging.css({ visibility: 'hidden' });
deferred.reject('截图失败(第' + (idx + 1) + '页): ' + err);
});
}
@@ -861,10 +872,13 @@ var PhoneImageEngine = (function () {
$staging.append($wrapper);
requestAnimationFrame(function () {
+ // html2canvas会跳过visibility:hidden的元素,临时切换为可见
+ $staging.css({ visibility: 'visible' });
// 先转换代码块为图片
convertCodeBlocks().then(function () {
var $pageElems = $staging.find('.phone-image-page');
if ($pageElems.length === 0) {
+ $staging.css({ visibility: 'hidden' });
deferred.reject('没有可渲染的页面');
return;
}
@@ -876,6 +890,7 @@ var PhoneImageEngine = (function () {
function captureNext() {
if (idx >= total) {
$staging.empty();
+ $staging.css({ visibility: 'hidden' });
deferred.resolve(canvases);
return;
}
@@ -892,6 +907,7 @@ var PhoneImageEngine = (function () {
idx++;
captureNext();
}).catch(function (err) {
+ $staging.css({ visibility: 'hidden' });
deferred.reject('截图失败(第' + (idx + 1) + '页): ' + err);
});
}
@@ -901,6 +917,7 @@ var PhoneImageEngine = (function () {
// 代码块转换失败,继续截图流程
var $pageElems = $staging.find('.phone-image-page');
if ($pageElems.length === 0) {
+ $staging.css({ visibility: 'hidden' });
deferred.reject('没有可渲染的页面');
return;
}
@@ -912,6 +929,7 @@ var PhoneImageEngine = (function () {
function captureNext() {
if (idx >= total) {
$staging.empty();
+ $staging.css({ visibility: 'hidden' });
deferred.resolve(canvases);
return;
}
@@ -928,6 +946,7 @@ var PhoneImageEngine = (function () {
idx++;
captureNext();
}).catch(function (err) {
+ $staging.css({ visibility: 'hidden' });
deferred.reject('截图失败(第' + (idx + 1) + '页): ' + err);
});
}