fix: the size of an unloaded Image is 0

.changeset/proud-gifts-turn.md

@@ -0,0 +1,5 @@
+---
+'@antv/g-plugin-image-loader': patch
+---
+
+fix: the size of an unloaded Image is 0

__tests__/demos/perf/image.ts

@@ -7,19 +7,49 @@ export async function image(context: { canvas: Canvas; gui: lil.GUI }) {
   console.log(canvas);
 
   const group = new Group();
+
+  // let image = new GImage({
+  //   style: {
+  //     x: 0,
+  //     y: 0,
+  //     // width: 100,
+  //     // height: 400,
+  //     // src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+  //     // src: 'http://mmtcdp.stable.alipay.net/cto_designhubcore/afts/img/g1a5QYkvbcMAAAAAAAAAAAAADgLVAQBr/original',
+  //     src: 'https://mdn.alipayobjects.com/huamei_fr7vu1/afts/img/A*SqloToP7R9QAAAAAAAAAAAAADkn0AQ/original',
+  //     // src: 'https://freepngimg.com/download/svg/animal/10081.svg',
+  //   },
+  // });
+
+  // group.appendChild(image);
+
+  const img = new Image();
+  img.onload = () => {
+    console.log('onload', img.complete);
+    // let image = new GImage({
+    //   style: {
+    //     x: 0,
+    //     y: 0,
+    //     src: img,
+    //   },
+    // });
+    // group.appendChild(image);
+  };
+
   let image = new GImage({
     style: {
       x: 0,
       y: 0,
-      // width: 100,
-      // height: 400,
-      // src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
-      // src: 'http://mmtcdp.stable.alipay.net/cto_designhubcore/afts/img/g1a5QYkvbcMAAAAAAAAAAAAADgLVAQBr/original',
-      src: 'https://mdn.alipayobjects.com/huamei_fr7vu1/afts/img/A*SqloToP7R9QAAAAAAAAAAAAADkn0AQ/original',
+      src: img,
     },
   });
-
   group.appendChild(image);
+
+  // img.src = 'https://freepngimg.com/download/svg/animal/10081.svg';
+  img.src =
+    // 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ';
+    'https://mdn.alipayobjects.com/huamei_fr7vu1/afts/img/A*SqloToP7R9QAAAAAAAAAAAAADkn0AQ/original';
+
   canvas.appendChild(group);
 
   // ---

packages/g-plugin-image-loader/src/ImagePool.ts

@@ -118,6 +118,10 @@ export class ImagePool {
 
       return new Promise((resolve, reject) => {
         imageCache.img.addEventListener('load', () => {
+          imageCache.size = [
+            imageCache.img.naturalWidth || imageCache.img.width,
+            imageCache.img.naturalHeight || imageCache.img.height,
+          ];
           imageCache.tileSize = calculateImageTileSize(imageCache.img);
           resolve(imageCache);
         });
@@ -223,6 +227,7 @@ export class ImagePool {
   async createImageTiles(
     src: Image['attributes']['src'],
     tiles: [number, number][],
+    rerender: () => void,
     ref: DisplayObject,
   ): Promise<ImageCache> {
     const imageCache = await this.getOrCreateImage(src, ref);
@@ -241,6 +246,7 @@ export class ImagePool {
         imageCache.img,
         imageCache.tileSize[0],
         imageCache.tileSize[0],
+        rerender,
       ),
     };
 

packages/g-plugin-image-loader/src/ImageSlicer.ts

@@ -60,6 +60,7 @@ export class ImageSlicer {
     image: HTMLImageElement,
     sliceWidth: number,
     sliceHeight: number,
+    rerender: () => void,
     overlap = 0,
     api = ImageSlicer.api,
   ) {
@@ -123,6 +124,8 @@ export class ImageSlicer {
             tileY: row,
             data: sliceCanvas,
           };
+
+          rerender();
         });
       }
     }