');
for (var i = 0; i < pages.length; i++) {
@@ -852,118 +885,25 @@ var PhoneImageEngine = (function () {
}
$staging.append($wrapper);
- // 等待一帧确保 DOM 渲染完成
- requestAnimationFrame(function () {
- // html2canvas会跳过visibility:hidden的元素，临时切换为可见
- $staging.css({ visibility: 'visible' });
- // 先转换代码块为图片
- convertCodeBlocks().then(function () {
- return convertTables();
- }).then(function () {
- var $pageElems = $staging.find('.phone-image-page');
- if ($pageElems.length === 0) {
- $staging.css({ visibility: 'hidden' });
- displayThumbnails([], sizeConfig);
- deferred.resolve(pages);
- return;
- }
+ // 等待字体和DOM就绪
+ var fontsReady = (typeof document.fonts !== 'undefined' && document.fonts.ready)
+ ? document.fonts.ready
+ : $.Deferred().resolve().promise();
- // 串行截图每一页
- var thumbnailDataUrls = [];
- var idx = 0;
- var total = $pageElems.length;
-
- function captureNext() {
- if (idx >= total) {
- $staging.empty();
- $staging.css({ visibility: 'hidden' });
- displayThumbnails(thumbnailDataUrls, sizeConfig);
- deferred.resolve(pages);
- return;
- }
-
- var $elem = $pageElems.eq(idx);
- // 纯图片页优化: 跳过html2canvas，直接用原图src
- if (isPureImagePage($elem)) {
- var pureSrc = getPureImageSrc($elem);
- if (pureSrc) {
- thumbnailDataUrls.push(pureSrc);
- idx++;
- captureNext();
- return;
- }
- }
- html2canvas($elem[0], {
- scale: 1,
- useCORS: true,
- backgroundColor: '#ffffff',
- width: $elem.outerWidth(),
- height: $elem.outerHeight(),
- logging: false
- }).then(function (canvas) {
- thumbnailDataUrls.push(canvas.toDataURL('image/jpeg', 0.85));
- idx++;
- captureNext();
- }).catch(function (err) {
- $staging.css({ visibility: 'hidden' });
- deferred.reject('截图失败(第' + (idx + 1) + '页): ' + err);
+ fontsReady.then(function () {
+ requestAnimationFrame(function () {
+ // html2canvas会跳过visibility:hidden的元素，临时切换为可见
+ $staging.css({ visibility: 'visible' });
+ // 先转换代码块为图片
+ convertCodeBlocks().then(function () {
+ return convertTables();
+ }).then(function () {
+ runCaptureLoop($staging, opts, deferred);
+ }).catch(function () {
+ // 代码块转换失败，继续转换表格并截图流程
+ convertTables().then(function () {
+ runCaptureLoop($staging, opts, deferred);
});
- }
-
- captureNext();
- }).catch(function () {
- // 代码块转换失败，继续转换表格并截图流程
- convertTables().then(function () {
- var $pageElems = $staging.find('.phone-image-page');
- if ($pageElems.length === 0) {
- $staging.css({ visibility: 'hidden' });
- displayThumbnails([], sizeConfig);
- deferred.resolve(pages);
- return;
- }
-
- var thumbnailDataUrls = [];
- var idx = 0;
- var total = $pageElems.length;
-
- function captureNext() {
- if (idx >= total) {
- $staging.empty();
- $staging.css({ visibility: 'hidden' });
- displayThumbnails(thumbnailDataUrls, sizeConfig);
- deferred.resolve(pages);
- return;
- }
-
- var $elem = $pageElems.eq(idx);
- // 纯图片页优化: 跳过html2canvas，直接用原图src
- if (isPureImagePage($elem)) {
- var pureSrc = getPureImageSrc($elem);
- if (pureSrc) {
- thumbnailDataUrls.push(pureSrc);
- idx++;
- captureNext();
- return;
- }
- }
- html2canvas($elem[0], {
- scale: 1,
- useCORS: true,
- backgroundColor: '#ffffff',
- width: $elem.outerWidth(),
- height: $elem.outerHeight(),
- logging: false
- }).then(function (canvas) {
- thumbnailDataUrls.push(canvas.toDataURL('image/jpeg', 0.85));
- idx++;
- captureNext();
- }).catch(function (err) {
- $staging.css({ visibility: 'hidden' });
- deferred.reject('截图失败(第' + (idx + 1) + '页): ' + err);
- });
- }
-
- captureNext();
});
});
});
@@ -971,6 +911,117 @@ var PhoneImageEngine = (function () {
return deferred.promise();
}
+ /**
+ * 执行串行截图循环
+ * @param {jQuery} $staging - staging元素
+ * @param {Object} opts - 截图选项
+ * @param {jQuery Deferred} deferred - 外部deferred
+ */
+ function runCaptureLoop($staging, opts, deferred) {
+ var $pageElems = $staging.find('.phone-image-page');
+ if ($pageElems.length === 0) {
+ $staging.css({ visibility: 'hidden' });
+ if (opts.outputCanvas) {
+ deferred.reject('没有可渲染的页面');
+ } else {
+ deferred.resolve([]);
+ }
+ return;
+ }
+
+ var results = [];
+ var idx = 0;
+ var total = $pageElems.length;
+
+ function captureNext() {
+ if (idx >= total) {
+ $staging.empty();
+ $staging.css({ visibility: 'hidden' });
+ deferred.resolve(results);
+ return;
+ }
+
+ var $elem = $pageElems.eq(idx);
+
+ // 纯图片页优化
+ if (isPureImagePage($elem)) {
+ var pureSrc = getPureImageSrc($elem);
+ if (pureSrc) {
+ if (opts.outputCanvas) {
+ // 保存模式: 高质量绘制原图到canvas
+ renderPureImageToCanvas(pureSrc, opts.sizeConfig.width, opts.sizeConfig.height).then(function (canvas) {
+ results.push(canvas);
+ idx++;
+ captureNext();
+ }).catch(function () {
+ // 加载失败，回退到html2canvas
+ capturePageViaHtml2Canvas($elem, $staging, opts, results, idx, total, deferred, captureNext);
+ });
+ return;
+ } else {
+ // 缩略图模式: 直接用src
+ results.push(pureSrc);
+ idx++;
+ captureNext();
+ return;
+ }
+ }
+ }
+
+ capturePageViaHtml2Canvas($elem, $staging, opts, results, idx, total, deferred, captureNext);
+ }
+
+ captureNext();
+ }
+
+ /**
+ * 用html2canvas截图单页
+ */
+ function capturePageViaHtml2Canvas($elem, $staging, opts, results, idx, total, deferred, captureNext) {
+ html2canvas($elem[0], {
+ scale: opts.scale,
+ useCORS: true,
+ backgroundColor: '#ffffff',
+ width: $elem.outerWidth(),
+ height: $elem.outerHeight(),
+ logging: false
+ }).then(function (canvas) {
+ if (opts.outputCanvas) {
+ results.push(canvas);
+ } else {
+ results.push(canvas.toDataURL('image/jpeg', opts.quality));
+ }
+ idx++;
+ captureNext();
+ }).catch(function (err) {
+ $staging.css({ visibility: 'hidden' });
+ deferred.reject('截图失败(第' + (idx + 1) + '页): ' + err);
+ });
+ }
+
+ /**
+ * 渲染到隐藏区域 -> 截图 -> 显示缩略图
+ * @param {Object} sizeConfig
+ * @returns {jQuery Deferred} resolves with pages array
+ */
+ function renderThumbnails(sizeConfig) {
+ var deferred = $.Deferred();
+
+ doCapturePages({
+ scale: 1,
+ outputCanvas: false,
+ quality: 0.85,
+ sizeConfig: sizeConfig
+ }).then(function (dataUrls) {
+ displayThumbnails(dataUrls, sizeConfig);
+ deferred.resolve(pages);
+ }).catch(function (err) {
+ deferred.reject(err);
+ });
+
+ return deferred.promise();
+ }
+
/**
* 在右侧显示缩略图
* @param {Array} dataUrls - base64 图片数据
@@ -1021,171 +1072,35 @@ var PhoneImageEngine = (function () {
* @returns {jQuery Deferred} resolves with canvas array
*/
function capturePagesFromStaging() {
- var deferred = $.Deferred();
- ensureStaging();
-
- var $staging = $('#render-staging');
- $staging.empty();
-
var sizeConfig = config.sizes[config.size] || config.sizes.xiaohongshu;
-
- // 添加 size class wrapper
- var sizeClass = 'size-' + config.size;
- var $wrapper = $('
');
- for (var i = 0; i < pages.length; i++) {
- $wrapper.append(pages[i].html);
- }
- $staging.append($wrapper);
-
- requestAnimationFrame(function () {
- // html2canvas会跳过visibility:hidden的元素，临时切换为可见
- $staging.css({ visibility: 'visible' });
- // 先转换代码块为图片
- convertCodeBlocks().then(function () {
- return convertTables();
- }).then(function () {
- var $pageElems = $staging.find('.phone-image-page');
- if ($pageElems.length === 0) {
- $staging.css({ visibility: 'hidden' });
- deferred.reject('没有可渲染的页面');
- return;
- }
-
- var canvases = [];
- var idx = 0;
- var total = $pageElems.length;
-
- function captureNext() {
- if (idx >= total) {
- $staging.empty();
- $staging.css({ visibility: 'hidden' });
- deferred.resolve(canvases);
- return;
- }
-
- var $elem = $pageElems.eq(idx);
- // 纯图片页优化: 直接绘制原图到canvas
- if (isPureImagePage($elem)) {
- var pureSrc = getPureImageSrc($elem);
- if (pureSrc) {
- renderPureImageToCanvas(pureSrc, sizeConfig.width, sizeConfig.height).then(function (canvas) {
- canvases.push(canvas);
- idx++;
- captureNext();
- }).catch(function () {
- // 加载失败，回退到html2canvas
- html2canvas($elem[0], {
- scale: 2,
- useCORS: true,
- backgroundColor: '#ffffff',
- width: $elem.outerWidth(),
- height: $elem.outerHeight(),
- logging: false
- }).then(function (canvas) {
- canvases.push(canvas);
- idx++;
- captureNext();
- }).catch(function (err) {
- $staging.css({ visibility: 'hidden' });
- deferred.reject('截图失败(第' + (idx + 1) + '页): ' + err);
- });
- });
- return;
- }
- }
- html2canvas($elem[0], {
- scale: 2,
- useCORS: true,
- backgroundColor: '#ffffff',
- width: $elem.outerWidth(),
- height: $elem.outerHeight(),
- logging: false
- }).then(function (canvas) {
- canvases.push(canvas);
- idx++;
- captureNext();
- }).catch(function (err) {
- $staging.css({ visibility: 'hidden' });
- deferred.reject('截图失败(第' + (idx + 1) + '页): ' + err);
- });
- }
-
- captureNext();
- }).catch(function () {
- // 代码块转换失败，继续转换表格并截图流程
- convertTables().then(function () {
- var $pageElems = $staging.find('.phone-image-page');
- if ($pageElems.length === 0) {
- $staging.css({ visibility: 'hidden' });
- deferred.reject('没有可渲染的页面');
- return;
- }
-
- var canvases = [];
- var idx = 0;
- var total = $pageElems.length;
-
- function captureNext() {
- if (idx >= total) {
- $staging.empty();
- $staging.css({ visibility: 'hidden' });
- deferred.resolve(canvases);
- return;
- }
-
- var $elem = $pageElems.eq(idx);
- // 纯图片页优化: 直接绘制原图到canvas
- if (isPureImagePage($elem)) {
- var pureSrc = getPureImageSrc($elem);
- if (pureSrc) {
- renderPureImageToCanvas(pureSrc, sizeConfig.width, sizeConfig.height).then(function (canvas) {
- canvases.push(canvas);
- idx++;
- captureNext();
- }).catch(function () {
- // 加载失败，回退到html2canvas
- html2canvas($elem[0], {
- scale: 2,
- useCORS: true,
- backgroundColor: '#ffffff',
- width: $elem.outerWidth(),
- height: $elem.outerHeight(),
- logging: false
- }).then(function (canvas) {
- canvases.push(canvas);
- idx++;
- captureNext();
- }).catch(function (err) {
- $staging.css({ visibility: 'hidden' });
- deferred.reject('截图失败(第' + (idx + 1) + '页): ' + err);
- });
- });
- return;
- }
- }
- html2canvas($elem[0], {
- scale: 2,
- useCORS: true,
- backgroundColor: '#ffffff',
- width: $elem.outerWidth(),
- height: $elem.outerHeight(),
- logging: false
- }).then(function (canvas) {
- canvases.push(canvas);
- idx++;
- captureNext();
- }).catch(function (err) {
- $staging.css({ visibility: 'hidden' });
- deferred.reject('截图失败(第' + (idx + 1) + '页): ' + err);
- });
- }
-
- captureNext();
- });
- });
+ return doCapturePages({
+ scale: 2,
+ outputCanvas: true,
+ quality: 0.92,
+ sizeConfig: sizeConfig
});
+ }
- return deferred.promise();
+ /**
+ * DOM实测高度 - 从#content-flow中读取每个块的实际渲染高度
+ * @param {Array} blocks - parseHtmlToBlocks 返回的块数组
+ */
+ function measureBlockHeights(blocks) {
+ var $flow = $('#content-flow');
+ if (!$flow.length) return;
+
+ for (var i = 0; i < blocks.length; i++) {
+ var block = blocks[i];
+ if (block.type === 'page-break') continue;
+
+ var $blockEl = $flow.find('.content-flow-block[data-index="' + i + '"]');
+ if ($blockEl.length) {
+ var actualHeight = Math.round($blockEl[0].getBoundingClientRect().height);
+ if (actualHeight > 0) {
+ block.estimatedHeight = actualHeight;
+ }
+ }
+ }
}
/**