diff --git a/public/static/js/phone-image.js b/public/static/js/phone-image.js index 4577028..f25623d 100644 --- a/public/static/js/phone-image.js +++ b/public/static/js/phone-image.js @@ -761,6 +761,77 @@ var PhoneImageEngine = (function () { return deferred.promise(); } + // ===== 纯图片页优化 ===== + + /** + * 检测staging区域中的页面元素是否为纯图片页 + * 纯图片页: .page-body 内 .page-content 只含1个img且无文字内容 + * @param {jQuery} $pageElem - .phone-image-page 元素 + * @returns {boolean} + */ + function isPureImagePage($pageElem) { + // 仅内容页 + if (!$pageElem.hasClass('page-body')) return false; + var $content = $pageElem.find('.page-content'); + if (!$content.length) return false; + + // 检查是否有文字内容(排除纯空白文本节点) + var textContent = $content.text().replace(/\s/g, ''); + if (textContent.length > 0) return false; + + // 检查img数量: 必须恰好1个img + var $imgs = $content.find('img'); + if ($imgs.length !== 1) return false; + + // img必须有有效src + var src = $imgs.first().attr('src'); + return src && src.length > 0; + } + + /** + * 从纯图片页元素中获取img的src + * @param {jQuery} $pageElem + * @returns {string} + */ + function getPureImageSrc($pageElem) { + var $img = $pageElem.find('.page-content img').first(); + return $img.attr('src') || ''; + } + + /** + * 将原始图片绘制到canvas(用于高质量保存路径) + * @param {string} src - 图片src + * @param {number} width - 目标宽度 + * @param {number} height - 目标高度 + * @returns {jQuery Deferred} resolves with canvas + */ + function renderPureImageToCanvas(src, width, height) { + var deferred = $.Deferred(); + var img = new Image(); + img.crossOrigin = 'anonymous'; + img.onload = function () { + if (img.naturalWidth === 0 || img.naturalHeight === 0) { + deferred.reject('Image has zero dimensions'); + return; + } + var canvas = document.createElement('canvas'); + canvas.width = width * 2; // scale:2 高质量 + canvas.height = height * 2; + var ctx = canvas.getContext('2d'); + // 白色背景 + ctx.fillStyle = '#ffffff'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + // 缩放绘制 + ctx.drawImage(img, 0, 0, canvas.width, canvas.height); + deferred.resolve(canvas); + }; + img.onerror = function () { + deferred.reject('Image load failed'); + }; + img.src = src; + return deferred.promise(); + } + /** * 渲染到隐藏区域 → 截图 → 显示缩略图 * @param {Object} sizeConfig @@ -812,6 +883,16 @@ var PhoneImageEngine = (function () { } 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, @@ -855,6 +936,16 @@ var PhoneImageEngine = (function () { } 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, @@ -972,12 +1063,42 @@ var PhoneImageEngine = (function () { return; } - html2canvas($pageElems.eq(idx)[0], { + 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: $pageElems.eq(idx).outerWidth(), - height: $pageElems.eq(idx).outerHeight(), + width: $elem.outerWidth(), + height: $elem.outerHeight(), logging: false }).then(function (canvas) { canvases.push(canvas); @@ -1012,12 +1133,42 @@ var PhoneImageEngine = (function () { return; } - html2canvas($pageElems.eq(idx)[0], { + 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: $pageElems.eq(idx).outerWidth(), - height: $pageElems.eq(idx).outerHeight(), + width: $elem.outerWidth(), + height: $elem.outerHeight(), logging: false }).then(function (canvas) { canvases.push(canvas);