feat(phone-image): pure image page optimization - use original image instead of screenshot

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: $pageElems.eq(idx).outerWidth(),
+                                    width: $elem.outerWidth(),
-                        height: $pageElems.eq(idx).outerHeight(),
+                                    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);
@@ -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: $pageElems.eq(idx).outerWidth(),
+                                        width: $elem.outerWidth(),
-                            height: $pageElems.eq(idx).outerHeight(),
+                                        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);