aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加异步导出功能，优化导出图片的下载流程

Browse Source
This commit is contained in:
bighuixiang
2025-07-22 20:39:10 +08:00
parent 3652e0a384
commit 46ef450dfb
4 changed files with 152 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/component/Canvas/CanvasEditor/managers/CanvasManager.js
View File

@@ -810,7 +810,7 @@ export class CanvasManager {
* @param {Boolean} options.restoreOpacityInRedGreen 红绿图模式下是否恢复透明度为1
* @returns {String} 导出的图片数据URL
*/
exportImage(options = {}) {
async exportImage(options = {}) {
if (!this.exportManager) {
console.error("导出管理器未初始化，请确保已设置图层管理器");
throw new Error("导出管理器未初始化");
@@ -852,7 +852,7 @@ export class CanvasManager {
}
}
return this.exportManager.exportImage(enhancedOptions);
return await this.exportManager.exportImage(enhancedOptions);
} catch (error) {
console.error("CanvasManager导出图片失败:", error);
throw error;

118
src/component/Canvas/CanvasEditor/managers/ExportManager.js
View File

@@ -34,7 +34,6 @@ export class ExportManager {
expPicType = "png",
restoreOpacityInRedGreen = true,
} = options;
try {
// 检查是否为红绿图模式
const isRedGreenMode = this.layerManager?.isInRedGreenMode?.() || false;
@@ -86,7 +85,12 @@ export class ExportManager {
* @returns {String} 图片数据URL
* @private
*/
_exportSpecificLayer(layerId, expPicType, isRedGreenMode, restoreOpacityInRedGreen) {
async _exportSpecificLayer(
layerId,
expPicType,
isRedGreenMode,
restoreOpacityInRedGreen
) {
if (!this.layerManager) {
throw new Error("图层管理器未初始化");
}
@@ -110,11 +114,19 @@ export class ExportManager {
// 红绿图模式下使用固定尺寸和裁剪
if (isRedGreenMode) {
return this._exportWithRedGreenMode(objectsToExport, expPicType, restoreOpacityInRedGreen);
return this._exportWithRedGreenMode(
objectsToExport,
expPicType,
restoreOpacityInRedGreen
);
}
// 普通模式使用画布尺寸
return this._exportWithCanvasSize(objectsToExport, expPicType, restoreOpacityInRedGreen);
return await this._exportWithCanvasSize(
objectsToExport,
expPicType,
restoreOpacityInRedGreen
);
}
/**
@@ -128,7 +140,7 @@ export class ExportManager {
* @returns {String} 图片数据URL
* @private
*/
_exportMultipleLayers(
async _exportMultipleLayers(
layerIdArray,
expPicType,
isContainBg,
@@ -155,11 +167,19 @@ export class ExportManager {
// 红绿图模式下使用固定尺寸和裁剪
if (isRedGreenMode) {
return this._exportWithRedGreenMode(objectsToExport, expPicType, restoreOpacityInRedGreen);
return this._exportWithRedGreenMode(
objectsToExport,
expPicType,
restoreOpacityInRedGreen
);
}
// 普通模式使用画布尺寸
return this._exportWithCanvasSize(objectsToExport, expPicType, restoreOpacityInRedGreen);
return await this._exportWithCanvasSize(
objectsToExport,
expPicType,
restoreOpacityInRedGreen
);
}
/**
@@ -172,7 +192,7 @@ export class ExportManager {
* @returns {String} 图片数据URL
* @private
*/
_exportAllLayers(
async _exportAllLayers(
expPicType,
isContainBg,
isContainFixed,
@@ -194,14 +214,22 @@ export class ExportManager {
// 红绿图模式下使用固定尺寸和裁剪
if (isRedGreenMode) {
return this._exportWithRedGreenMode(objectsToExport, expPicType, restoreOpacityInRedGreen);
return this._exportWithRedGreenMode(
objectsToExport,
expPicType,
restoreOpacityInRedGreen
);
}
let canvasClipPath = this.canvas.clipPath;
if (isCropByBg) {
const cropWidth =
this.canvasManager?.canvasWidth?.value || this.canvas?.canvasWidth || this.canvas.width;
this.canvasManager?.canvasWidth?.value ||
this.canvas?.canvasWidth ||
this.canvas.width;
const cropHeight =
this.canvasManager?.canvasHeight?.value || this.canvas?.canvasHeight || this.canvas.height;
this.canvasManager?.canvasHeight?.value ||
this.canvas?.canvasHeight ||
this.canvas.height;
canvasClipPath = new fabric.Rect({
left: this.canvas.width / 2,
top: this.canvas.height / 2,
@@ -219,7 +247,7 @@ export class ExportManager {
canvasClipPath.setCoords();
}
// 普通模式使用画布尺寸
return this._exportWithCanvasSize(
return await this._exportWithCanvasSize(
objectsToExport,
expPicType,
restoreOpacityInRedGreen,
@@ -303,14 +331,27 @@ export class ExportManager {
* @returns {String} 图片数据URL
* @private
*/
async _exportObject(obj, expPicType, isRedGreenMode, restoreOpacityInRedGreen) {
async _exportObject(
obj,
expPicType,
isRedGreenMode,
restoreOpacityInRedGreen
) {
// 红绿图模式下使用固定尺寸和裁剪
if (isRedGreenMode) {
return this._exportWithRedGreenMode([obj], expPicType, restoreOpacityInRedGreen);
return this._exportWithRedGreenMode(
[obj],
expPicType,
restoreOpacityInRedGreen
);
}
// 普通模式使用画布尺寸
return this._exportWithCanvasSize([obj], expPicType, restoreOpacityInRedGreen);
return await this._exportWithCanvasSize(
[obj],
expPicType,
restoreOpacityInRedGreen
);
}
/**
@@ -333,7 +374,8 @@ export class ExportManager {
if (layerIdArray && !layerIdArray.includes(layer.id)) continue;
// 检查图层类型过滤条件
if (!this._shouldIncludeLayer(layer, isContainBg, isContainFixed)) continue;
if (!this._shouldIncludeLayer(layer, isContainBg, isContainFixed))
continue;
if (layer.visible) {
const layerObjects = this._collectObjectsFromLayer(layer);
@@ -472,12 +514,21 @@ export class ExportManager {
* @returns {String} 图片数据URL
* @private
*/
async _exportWithRedGreenMode(objectsToExport, expPicType, restoreOpacityInRedGreen) {
async _exportWithRedGreenMode(
objectsToExport,
expPicType,
restoreOpacityInRedGreen
) {
// 获取固定图层对象（衣服底图）作为参考
const fixedLayerObject = this._getFixedLayerObject() ?? this.canvas.clipPath;
const fixedLayerObject =
this._getFixedLayerObject() ?? this.canvas.clipPath;
if (!fixedLayerObject) {
console.warn("红绿图模式下未找到固定图层对象，使用画布尺寸");
return this._exportWithCanvasSize(objectsToExport, expPicType, restoreOpacityInRedGreen);
return await this._exportWithCanvasSize(
objectsToExport,
expPicType,
restoreOpacityInRedGreen
);
}
// 获取固定图层对象的边界矩形（包含位置、尺寸、缩放等信息）
@@ -514,7 +565,10 @@ export class ExportManager {
// 克隆并添加所有对象到临时画布，需要调整位置相对于固定图层
for (let i = 0; i < objectsToExport.length; i++) {
const obj = objectsToExport[i];
const cloned = await this._cloneObjectForExport(obj, restoreOpacityInRedGreen && true);
const cloned = await this._cloneObjectForExport(
obj,
restoreOpacityInRedGreen && true
);
if (cloned) {
// 调整对象位置：将原画布坐标转换为以固定图层为原点的相对坐标
cloned.set({
@@ -552,7 +606,12 @@ export class ExportManager {
* @returns {String} 图片数据URL
* @private
*/
async _exportWithCanvasSize(objectsToExport, expPicType, restoreOpacityInRedGreen, maskObject) {
async _exportWithCanvasSize(
objectsToExport,
expPicType,
restoreOpacityInRedGreen,
maskObject
) {
// 使用当前画布尺寸
// const canvasWidth =
// this.canvasManager?.canvasWidth?.value || this.canvas.width;
@@ -644,7 +703,10 @@ export class ExportManager {
* @returns {Promise<fabric.Object>} 克隆的对象
* @private
*/
_cloneObjectAsync(obj, propertiesToInclude = ["id", "layerId", "layerName", "name"]) {
_cloneObjectAsync(
obj,
propertiesToInclude = ["id", "layerId", "layerName", "name"]
) {
return new Promise((resolve, reject) => {
if (!obj) {
resolve(null);
@@ -674,7 +736,11 @@ export class ExportManager {
* @returns {Promise<Object>} 克隆的对象
* @private
*/
async _cloneObjectForExport(obj, forceRestoreOpacity = false, removeClipPath = true) {
async _cloneObjectForExport(
obj,
forceRestoreOpacity = false,
removeClipPath = true
) {
if (!obj) return null;
try {
@@ -808,7 +874,11 @@ export class ExportManager {
}
// 克隆对象作为裁剪路径
const clonedClipPath = await this._cloneObjectForExport(clipObject, false, false);
const clonedClipPath = await this._cloneObjectForExport(
clipObject,
false,
false
);
if (!clonedClipPath) {
console.warn("无法克隆裁剪对象");