Javascript Image Class width ermitteln - Fragen zu Clasures

[TM69]

Wie bereits unter https://www.php.de/forum/webentwickl...unterscheidung erwähnt bin ich gerade dabei mir eine Grafik-Bibliothek zu schreiben.
Meine Image - Klasse sind (auszugsweise aufs wesentliche) wie folgt aus

export class DrawImage {
    private image: HTMLImageElement = null;                 // the image to draw
    private boundRect: Rect = new Rect(0, 0, 0, 0);         // this is the bound rect

    ....
   public getImage(): HTMLImageElement {
        if ( this.image == null ) {
            this.image = new Image();

            this.image.onload = function() {
                this.boundRect.setWidth(this.width);
                this.boundRect.setHeight(this.height);
            }
        }
    }

    public getBoundRect(): Rect {
        return this.boundRect;
    }

Hierzu 2 Fragen.

1. Wie erhält man in Javascript aus einer Clasure (onLoad - Funktion in der function getImage()) heraus zugriff auf das Attribut (this.boundRect) der Klasse.
2. Die Funktion von onLoad wird ja erst ausgeführt, wenn das Bild geladen ist. Wie stelle ich aber sicher, dass in der Funktion getBoundRect() die Breite und Höhe des Bildes bereits in der this.boundRect vorliegt?

[hellbringer]

1. Man verwendet nicht function ( ) { }, sondern ( ) => { }.
2. Variante a) du machst eine asynchrone Funktion daraus, Variante b) die implementierst in deiner Klasse auch ein onload-Event, der von außerhalb geprüft werden muss.

[TM69]

1. Man verwendet nicht function ( ) { }, sondern ( ) => { }.
2. Variante a) du machst eine asynchrone Funktion daraus, Variante b) die implementierst in deiner Klasse auch ein onload-Event, der von außerhalb geprüft werden muss.

Also wenn ich dich und das Tutorial richtig verstehen, dann müsste es so aussehen

public getImage(): HTMLImageElement {
     if ( this.image == null ) {
          this.image = new Image();

          this.image.onload = async () => {
               this.boundRect.setWidth(this.image.width);
               this.boundRect.setHeight(this.image.height);
         }
    }

   return this.image;
}

[hellbringer]

So habe ich das nicht gemeint. getImage() musst du asynchron machen.