diff --git a/.changeset/proud-gifts-turn.md b/.changeset/proud-gifts-turn.md new file mode 100644 index 000000000..16fb4772c --- /dev/null +++ b/.changeset/proud-gifts-turn.md @@ -0,0 +1,5 @@ +--- +'@antv/g-plugin-image-loader': patch +--- + +fix: the size of an unloaded Image is 0 diff --git a/__tests__/demos/perf/image.ts b/__tests__/demos/perf/image.ts index 3eff13d5f..0f61f9a51 100644 --- a/__tests__/demos/perf/image.ts +++ b/__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); // --- diff --git a/packages/g-plugin-image-loader/src/ImagePool.ts b/packages/g-plugin-image-loader/src/ImagePool.ts index ae03d10b0..3ce3c7b20 100644 --- a/packages/g-plugin-image-loader/src/ImagePool.ts +++ b/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 { const imageCache = await this.getOrCreateImage(src, ref); @@ -241,6 +246,7 @@ export class ImagePool { imageCache.img, imageCache.tileSize[0], imageCache.tileSize[0], + rerender, ), }; diff --git a/packages/g-plugin-image-loader/src/ImageSlicer.ts b/packages/g-plugin-image-loader/src/ImageSlicer.ts index cf1e1e1ca..4e2fc261d 100644 --- a/packages/g-plugin-image-loader/src/ImageSlicer.ts +++ b/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(); }); } }