From 8d3bf194e7c4f0354b0b8e5f4bf5375689720d05 Mon Sep 17 00:00:00 2001
From: wangpeng618 <wangpeng618@jd.com>
Date: Wed, 13 Mar 2024 09:34:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20#50=20#68=20=E5=9B=BE=E7=89=87=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=E5=86=8D=E5=AF=BC=E5=85=A5=E9=97=AE=E9=A2=98=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/src/app.ts | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/app.ts b/packages/core/src/app.ts
index 5720638..1de3eaf 100644
--- a/packages/core/src/app.ts
+++ b/packages/core/src/app.ts
@@ -396,13 +396,28 @@ export class App extends BaseService<EventArgs> {
   }
 
   public toJSON(): string {
-    return JSON.stringify(this.mainLayer.toObject());
+    const result = this?.mainLayer?.toObject() || {};
+    result.children.forEach((child: KonvaNode) => {
+      if (child.className === 'Image') {
+        child.attrs.image = child?.attrs?.image?.currentSrc;
+      }
+    });
+    return JSON.stringify(result);
   }
 
   public fromJSON(json: string): this {
+    const data = JSON.parse(json);
+    data.children.forEach((child: KonvaNode) => {
+      if (child.className === 'Image') {
+        const image = new Image();
+        image.src = child?.attrs?.image;
+        child.attrs.image = image;
+      }
+    });
+
     this.clear();
     this.mainLayer.remove();
-    const layer = Konva.Node.create(json, 'layer');
+    const layer = Konva.Node.create(data, 'layer');
     this.mainLayer = layer;
     this.stage.add(this.mainLayer);
     this.resetPluginsLayer([...this.installedPlugins.keys()]);