mirror of
https://gitee.com/ulthon/ulthon_information.git
synced 2026-07-01 14:42:48 +08:00
feat(phone-image): pure image page optimization - use original image instead of screenshot
This commit is contained in:
augushong
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user