控制导出图片大小

This commit is contained in:
李志鹏
2026-01-16 13:02:26 +08:00
parent a5e21c93b3
commit ba5b1657a5
3 changed files with 36 additions and 3 deletions

View File

@@ -47,6 +47,7 @@ import {
uploadImageAndCreateLayer, uploadImageAndCreateLayer,
loadImageUrlToLayer, loadImageUrlToLayer,
loadImage, loadImage,
resizeImage,
} from "./utils/imageHelper.js"; } from "./utils/imageHelper.js";
import { optimizeCanvasRendering } from "./utils/helper"; import { optimizeCanvasRendering } from "./utils/helper";
// import MinimapPanel from "./components/MinimapPanel.vue"; // import MinimapPanel from "./components/MinimapPanel.vue";
@@ -1021,7 +1022,7 @@ defineExpose({
); );
}, },
// 导出图片 // 导出图片
exportImage: ({ exportImage: async ({
isContainBg = false, // 是否包含背景图层 isContainBg = false, // 是否包含背景图层
isContainFixed = false, // 是否包含固定图层 isContainFixed = false, // 是否包含固定图层
isContainFixedOther = true, // 是否包含其他固定图层--颜色图层 isContainFixedOther = true, // 是否包含其他固定图层--颜色图层
@@ -1033,8 +1034,10 @@ defineExpose({
layerIdArray = [], // 导出多个图层ID数组 layerIdArray = [], // 导出多个图层ID数组
expPicType = "png", // 导出图片类型 JPG 或 PNG ,SVG expPicType = "png", // 导出图片类型 JPG 或 PNG ,SVG
isEnhanceImg, // 是否是增强图片 isEnhanceImg, // 是否是增强图片
width = 0,// 导出的图片宽度
height = 0, // 导出的图片高度
} = {}) => { } = {}) => {
return canvasManager.exportImage({ var base64 = await canvasManager.exportImage({
isContainBg, isContainBg,
isContainFixed, isContainFixed,
isContainFixedOther, isContainFixedOther,
@@ -1047,6 +1050,10 @@ defineExpose({
expPicType, expPicType,
isEnhanceImg, isEnhanceImg,
}); });
if(width > 0 && height > 0){
base64 = await resizeImage(base64, width, height);
}
return base64;
}, },
// 导出颜色图层 // 导出颜色图层
exportColorLayer: () => { exportColorLayer: () => {

View File

@@ -1049,10 +1049,12 @@ export class CanvasManager {
// 导出印花和元素图层信息 // 导出印花和元素图层信息
const printTrimsData = await this.exportPrintTrimsLayers().catch(() => ({prints: null, trims: null})); const printTrimsData = await this.exportPrintTrimsLayers().catch(() => ({prints: null, trims: null}));
return { const obj = {
color, color,
...printTrimsData, ...printTrimsData,
}; };
console.log("==========exportExtraInfo:", obj);
return obj;
} }
/** /**

View File

@@ -2191,3 +2191,27 @@ export const imageModeHandler = ({ imageMode, newImage, canvasWidth, canvasHeigh
} }
} }
}; };
/**
* 调整图像大小
* @param {string} base64 - 原始base64字符串
* @param {number} width - 目标宽度
* @param {number} height - 目标高度
* @returns {Promise<string>} 处理后的base64字符串
*/
export const resizeImage = async (base64, width, height) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = base64;
img.onload = () => {
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
resolve(canvas.toDataURL());
};
img.onerror = reject;
});
};