Enhance Image.getClientRect()

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 10.0.6 (2025-10-22)
+
+- Better `Image.getClientRect()` calculation if an instance has no image attached yet
+
 ## 10.0.5 (2025-10-22)
 
 - Simplify types to fix TS errors

src/shapes/Image.ts

@@ -43,7 +43,7 @@ export interface ImageConfig extends ShapeConfig {
 export class Image extends Shape<ImageConfig> {
   private _loadListener: () => void;
 
-  constructor(attrs: ImageConfig) {
+  constructor(attrs?: ImageConfig) {
     super(attrs);
     this._loadListener = () => {
       this._requestDraw();
@@ -147,10 +147,10 @@ export class Image extends Shape<ImageConfig> {
     context.fillStrokeShape(this);
   }
   getWidth() {
-    return this.attrs.width ?? (this.image() as any)?.width;
+    return this.attrs.width ?? (this.image() as any)?.width ?? 0;
   }
   getHeight() {
-    return this.attrs.height ?? (this.image() as any)?.height;
+    return this.attrs.height ?? (this.image() as any)?.height ?? 0;
   }
 
   /**

test/unit/Image-test.ts

@@ -396,6 +396,16 @@ describe('Image', function () {
     });
   });
 
+  it('test image client rect without image object attached', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+    var image = new Konva.Image();
+    layer.add(image);
+    assert.equal(image.getClientRect().width, 0);
+    assert.equal(image.getClientRect().height, 0);
+  });
+
   it('corner radius with shadow', function (done) {
     // that will trigger buffer canvas
     loadImage('darth-vader.jpg', (imageObj) => {