控制导出图片大小
This commit is contained in:
@@ -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: () => {
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -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;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user