使用 TypeScript 获取 Angular 中图像的高度和宽度

Question

I'm trying to get the width and height of an image using its src URL.
This code outputs "undefinedxundefined" to the console.
This is what I have now:

  getImageSize(image: string) {
let width;
let height;
let img = new Image();
img.src = image;
img.onload = function (event) {
  let targetImg = event.currentTarget as HTMLImageElement;
  width = targetImg.width;
  height = targetImg.height
}
return width + "x" + height;

}

I'm using Angular version 12.2.11.
Thanks!!

Answer 1

You need to look into Observable and subscriptions:

getImageSize(url: string): Observable<any> {
  return new Observable(observer => {
    var image = new Image();
    image.src = url;

    image.onload = (e: any) => {
      var height = e.path[0].height;
      var width = e.path[0].width;

      observer.next(width + 'x' + height);
      observer.complete();
    };
  });
}

Then you can subscribe to that observable and get the response from it:

this.getImageSize('your image url').subscribe(response => {
  console.log(response);
});

and that will return the width + 'x' + height .

Answer 2

To get the rect of any HTML element use:

const el = document.getElementById('dd');
const rect = el.getBoundingClientRect();
const height = rect.height;
const width = rect.width;