ulthon/ulthon_information
1
0
Fork 0
mirror of https://gitee.com/ulthon/ulthon_information.git synced 2026-07-08 20:52:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(phone-image): fix blank thumbnail preview - visibility and wrapper

Browse Source
This commit is contained in:
augushong
2026-05-03 10:07:13 +08:00
parent 9dc37283a3
commit d35172e14e
1 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
public/static/js/phone-image.js
View File

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