画布图片数据递归设置minio地址

src/component/Canvas/CanvasEditor/managers/CanvasManager.js

@@ -993,7 +993,21 @@ export class CanvasManager {
       throw new Error("获取画布JSON失败");
     }
   }
-
+/** 修复JSON数据中的ID丢失问题 */
+FixJsonIdLoss(json){
+	const layers = json?.layers || [];
+	const objects = json?.canvas?.objects || [];
+	layers.forEach((layer) => {
+		if(!layer.fabricObjects?.length && !layer.fabricObject){
+			const obj = objects?.find((o) => o.layerId === layer.id);
+			if(!obj) return;
+			layer.fabricObjects = [{
+				id: obj.id,
+				type: obj.type,
+			}]
+		}
+	})
+  }
   loadJSON(json, calllBack) {
     console.log("加载画布JSON数据:", json);
 
@@ -1006,6 +1020,7 @@ export class CanvasManager {
     // 解析JSON字符串
     try {
       const parsedJson = JSON.parse(json);
+	  this.FixJsonIdLoss(parsedJson);
       this.canvasWidth.value = parsedJson.canvasWidth || this.width;
       this.canvasHeight.value = parsedJson.canvasHeight || this.height;
       this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor;

src/component/Detail/canvas/index.vue

@@ -265,9 +265,22 @@ export default defineComponent({
 				let canvasJSON = detailDom?.editCanvas?.getJSON()
 				let canvasData = JSON.parse(canvasJSON)
 				if(!canvasData)return resolve()
-				canvasData.canvas.objects.forEach((objectsItem:any) => {
+				function deepProcessObjects(data:any, callback:any) {
-					if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
+					if (!Array.isArray(data)) return data;
+					return data.map(item => {
+						callback(item)
+						const processedItem = {...item};
+						if (processedItem.objects && 
+							Array.isArray(processedItem.objects) && 
+							processedItem.objects.length > 0) {
+						processedItem.objects = deepProcessObjects(processedItem.objects, callback);
+						}
+						return processedItem;
 					});
+				}
+				canvasData = deepProcessObjects(canvasData.canvas.objects,(item:any)=>{
+					if(item.type == 'image')item.minioUrl = getMinioUrl(item.src)
+				})
 				let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
 				let formData = new FormData();
 				formData.append("file", blob, "data.json");

src/component/home/design/tools.vue

@@ -335,9 +335,22 @@ export default defineComponent({
 			let canvasData = JSON.parse(canvasJSON)
 			
 			if(!canvasData)return
-			canvasData.canvas.objects.forEach((objectsItem:any) => {
+			function deepProcessObjects(data:any, callback:any) {
-				if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
+				if (!Array.isArray(data)) return data;
+				return data.map(item => {
+					callback(item)
+					const processedItem = {...item};
+					if (processedItem.objects && 
+						Array.isArray(processedItem.objects) && 
+						processedItem.objects.length > 0) {
+					processedItem.objects = deepProcessObjects(processedItem.objects, callback);
+					}
+					return processedItem;
 				});
+			}
+			canvasData = deepProcessObjects(canvasData.canvas.objects,(item:any)=>{
+				if(item.type == 'image')item.minioUrl = getMinioUrl(item.src)
+			})
 			let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
 			let formData = new FormData();
 			formData.append("file", blob, "data.json");

src/component/home/tools/deReconstruction/index.vue

@@ -206,11 +206,22 @@ export default defineComponent({
 			if(!canvasJSON)return
 			if(!store.state.Workspace.probjects?.id)return
 			let canvasData = JSON.parse(canvasJSON)
-			console.log(canvasData)
+			function deepProcessObjects(data:any, callback:any) {
-			canvasData.canvas.objects.forEach((objectsItem:any) => {
+				if (!Array.isArray(data)) return data;
-				if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
+				return data.map(item => {
-				
+					callback(item)
+					const processedItem = {...item};
+					if (processedItem.objects && 
+						Array.isArray(processedItem.objects) && 
+						processedItem.objects.length > 0) {
+					processedItem.objects = deepProcessObjects(processedItem.objects, callback);
+					}
+					return processedItem;
 				});
+			}
+			canvasData = deepProcessObjects(canvasData.canvas.objects,(item:any)=>{
+				if(item.type == 'image')item.minioUrl = getMinioUrl(item.src)
+			})
 			let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
 			let formData = new FormData();
 			formData.append("file", blob, "data.json");

src/component/toolsPage/index.vue

@@ -165,9 +165,22 @@ export default defineComponent({
 			time = setTimeout(()=>{
 				let canvasData = JSON.parse(canvasJSON)
 				if(!canvasData)return
-				canvasData.canvas.objects.forEach((objectsItem:any) => {
+				function deepProcessObjects(data:any, callback:any) {
-					if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
+					if (!Array.isArray(data)) return data;
+					return data.map(item => {
+						callback(item)
+						const processedItem = {...item};
+						if (processedItem.objects && 
+							Array.isArray(processedItem.objects) && 
+							processedItem.objects.length > 0) {
+						processedItem.objects = deepProcessObjects(processedItem.objects, callback);
+						}
+						return processedItem;
 					});
+				}
+				canvasData = deepProcessObjects(canvasData.canvas.objects,(item:any)=>{
+					if(item.type == 'image')item.minioUrl = getMinioUrl(item.src)
+				})
 				let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
 				let formData = new FormData();
 				formData.append("file", blob, "data.json");