diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue index eb1b70c7..510fbf25 100644 --- a/src/component/Canvas/CanvasEditor/index.vue +++ b/src/component/Canvas/CanvasEditor/index.vue @@ -47,6 +47,7 @@ import { uploadImageAndCreateLayer, loadImageUrlToLayer, loadImage, + resizeImage, } from "./utils/imageHelper.js"; import { optimizeCanvasRendering } from "./utils/helper"; // import MinimapPanel from "./components/MinimapPanel.vue"; @@ -1021,7 +1022,7 @@ defineExpose({ ); }, // 导出图片 - exportImage: ({ + exportImage: async ({ isContainBg = false, // 是否包含背景图层 isContainFixed = false, // 是否包含固定图层 isContainFixedOther = true, // 是否包含其他固定图层--颜色图层 @@ -1033,8 +1034,10 @@ defineExpose({ layerIdArray = [], // 导出多个图层ID数组 expPicType = "png", // 导出图片类型 JPG 或 PNG ,SVG isEnhanceImg, // 是否是增强图片 + width = 0,// 导出的图片宽度 + height = 0, // 导出的图片高度 } = {}) => { - return canvasManager.exportImage({ + var base64 = await canvasManager.exportImage({ isContainBg, isContainFixed, isContainFixedOther, @@ -1047,6 +1050,10 @@ defineExpose({ expPicType, isEnhanceImg, }); + if(width > 0 && height > 0){ + base64 = await resizeImage(base64, width, height); + } + return base64; }, // 导出颜色图层 exportColorLayer: () => { diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js index a07f75d6..9a6ccfdb 100644 --- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js +++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js @@ -1049,10 +1049,12 @@ export class CanvasManager { // 导出印花和元素图层信息 const printTrimsData = await this.exportPrintTrimsLayers().catch(() => ({prints: null, trims: null})); - return { + const obj = { color, ...printTrimsData, }; + console.log("==========exportExtraInfo:", obj); + return obj; } /** diff --git a/src/component/Canvas/CanvasEditor/utils/imageHelper.js b/src/component/Canvas/CanvasEditor/utils/imageHelper.js index 52960a3f..15bd7bf6 100644 --- a/src/component/Canvas/CanvasEditor/utils/imageHelper.js +++ b/src/component/Canvas/CanvasEditor/utils/imageHelper.js @@ -2191,3 +2191,27 @@ export const imageModeHandler = ({ imageMode, newImage, canvasWidth, canvasHeigh } } }; + + +/** + * 调整图像大小 + * @param {string} base64 - 原始base64字符串 + * @param {number} width - 目标宽度 + * @param {number} height - 目标高度 + * @returns {Promise} 处理后的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; + }); +};