diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js index f17c8d75..256f2e2f 100644 --- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js +++ b/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; diff --git a/src/component/Detail/canvas/index.vue b/src/component/Detail/canvas/index.vue index 4b14e789..bc6ecf33 100644 --- a/src/component/Detail/canvas/index.vue +++ b/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) => { - if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src) - }); + function deepProcessObjects(data:any, callback:any) { + 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"); diff --git a/src/component/home/design/tools.vue b/src/component/home/design/tools.vue index 7c77be77..ea741e7f 100644 --- a/src/component/home/design/tools.vue +++ b/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) => { - if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src) - }); + function deepProcessObjects(data:any, callback:any) { + 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"); diff --git a/src/component/home/tools/deReconstruction/index.vue b/src/component/home/tools/deReconstruction/index.vue index e6d7c772..0d2c1cd6 100644 --- a/src/component/home/tools/deReconstruction/index.vue +++ b/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) - canvasData.canvas.objects.forEach((objectsItem:any) => { - if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src) - - }); + function deepProcessObjects(data:any, callback:any) { + 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"); diff --git a/src/component/toolsPage/index.vue b/src/component/toolsPage/index.vue index 8b3e72ed..a4ffa083 100644 --- a/src/component/toolsPage/index.vue +++ b/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) => { - if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src) - }); + function deepProcessObjects(data:any, callback:any) { + 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");