From cc62be458d582a52045767d924a8c432825676ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=A6=82=E6=80=80=E5=BF=B5=EF=BC=88=E4=BA=91?=
 =?UTF-8?q?=E8=B0=8C=EF=BC=89?= <mrwang1212@126.com>
Date: Mon, 24 Feb 2025 13:40:49 +0800
Subject: [PATCH] fix: image element rendering triggers an exception (#1906)

* fix: image element rendering triggers an exception

* chore: add image bugfix demo #1906
---
 .changeset/loud-icons-press.md                |  6 ++++
 .eslintrc.cjs                                 |  1 +
 __tests__/demos/bugfix/1906.ts                | 33 +++++++++++++++++++
 __tests__/demos/bugfix/index.ts               |  1 +
 .../src/shapes/styles/Image.ts                | 24 ++++++++++----
 .../g-plugin-image-loader/src/ImagePool.ts    |  4 +--
 6 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/loud-icons-press.md
 create mode 100644 __tests__/demos/bugfix/1906.ts

diff --git a/.changeset/loud-icons-press.md b/.changeset/loud-icons-press.md
new file mode 100644
index 000000000..cc1412bbb
--- /dev/null
+++ b/.changeset/loud-icons-press.md
@@ -0,0 +1,6 @@
+---
+'@antv/g-plugin-canvas-renderer': patch
+'@antv/g-plugin-image-loader': patch
+---
+
+fix: image element rendering triggers an exception
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 1e45ca9e5..83db1a15a 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -49,6 +49,7 @@ module.exports = {
     'import/no-cycle': 'warn',
     'import/no-duplicates': 'warn',
     'class-methods-use-this': 'warn',
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
     'no-plusplus': [
       'warn',
       {
diff --git a/__tests__/demos/bugfix/1906.ts b/__tests__/demos/bugfix/1906.ts
new file mode 100644
index 000000000..b5e91416d
--- /dev/null
+++ b/__tests__/demos/bugfix/1906.ts
@@ -0,0 +1,33 @@
+import { Canvas, Image as GImage } from '@antv/g';
+
+/**
+ * @see https://github.com/antvis/G/pull/1906
+ */
+export async function issue_1906(context: { canvas: Canvas }) {
+  const { canvas } = context;
+  await canvas.ready;
+  canvas.context.config.enableLargeImageOptimization = true;
+
+  const img = new Image();
+  img.onload = () => {
+    console.log('onload', img.complete);
+
+    // remove && expect no error
+    requestAnimationFrame(() => {
+      image.remove();
+    });
+  };
+
+  let image = new GImage({
+    style: {
+      x: 0,
+      y: 0,
+      src: img,
+    },
+  });
+
+  img.src =
+    'https://mdn.alipayobjects.com/huamei_fr7vu1/afts/img/A*SqloToP7R9QAAAAAAAAAAAAADkn0AQ/original';
+
+  canvas.appendChild(image);
+}
diff --git a/__tests__/demos/bugfix/index.ts b/__tests__/demos/bugfix/index.ts
index 9c1f8b698..4cac0aa5d 100644
--- a/__tests__/demos/bugfix/index.ts
+++ b/__tests__/demos/bugfix/index.ts
@@ -10,6 +10,7 @@ export { test_pick } from './1747';
 export { issue_1760 } from './1760';
 export { issue_1176 } from './1176';
 export { issue_1882 } from './1882';
+export { issue_1906 } from './1906';
 export { textWordWrap } from './textWordWrap';
 export { group_with_stroke } from './group-with-stroke';
 export { switchRenderer } from './switch-renderer';
diff --git a/packages/g-plugin-canvas-renderer/src/shapes/styles/Image.ts b/packages/g-plugin-canvas-renderer/src/shapes/styles/Image.ts
index 1738e8d69..f9763e0ce 100644
--- a/packages/g-plugin-canvas-renderer/src/shapes/styles/Image.ts
+++ b/packages/g-plugin-canvas-renderer/src/shapes/styles/Image.ts
@@ -47,14 +47,19 @@ export class ImageRenderer extends DefaultRenderer {
     if (!imageCache.downSampled) {
       this.imagePool
         .createDownSampledImage(src, object)
-        .then((res) => {
+        .then(() => {
+          // be removed from dom tree
+          if (!object.ownerDocument) {
+            return;
+          }
+
           // rerender
           // object.dirty();
           object.renderable.dirty = true;
           object.ownerDocument.defaultView.context.renderingService.dirtify();
         })
-        .catch(() => {
-          //
+        .catch((reason) => {
+          console.error(reason);
         });
 
       return;
@@ -92,6 +97,11 @@ export class ImageRenderer extends DefaultRenderer {
           src,
           [],
           () => {
+            // be removed from dom tree
+            if (!object.ownerDocument) {
+              return;
+            }
+
             // rerender
             // object.dirty();
             object.renderable.dirty = true;
@@ -99,8 +109,8 @@ export class ImageRenderer extends DefaultRenderer {
           },
           object,
         )
-        .catch(() => {
-          //
+        .catch((reason) => {
+          console.error(reason);
         });
 
       return;
@@ -244,7 +254,9 @@ export class ImageRenderer extends DefaultRenderer {
         imageRect,
         drawRect,
       });
-    } catch {}
+    } catch {
+      // expected error
+    }
   }
 
   // ---
diff --git a/packages/g-plugin-image-loader/src/ImagePool.ts b/packages/g-plugin-image-loader/src/ImagePool.ts
index dc4ea785d..c3bafa7d4 100644
--- a/packages/g-plugin-image-loader/src/ImagePool.ts
+++ b/packages/g-plugin-image-loader/src/ImagePool.ts
@@ -85,8 +85,8 @@ export class ImagePool {
       .then((cache) => {
         callback?.(cache);
       })
-      .catch(() => {
-        //
+      .catch((reason) => {
+        console.error(reason);
       });
 
     return null;