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

Question

我正在尝试使用其 src URL 获取图像的宽度和高度。
此代码将“undefinedxundefined”输出到控制台。
这就是我现在拥有的：

  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;

}

我正在使用 Angular 版本 12.2.11。
谢谢！！

Answer 1

要获取任何 HTML 元素的矩形，请使用：

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

Answer 2

您需要查看 Observable 和订阅：

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();
    };
  });
}

然后你可以订阅那个 observable 并从它那里得到响应：

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

这将 return width + 'x' + height。

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

Getting the height and width of an image in Angular using TypeScript

javascript

typescript

angular-cli

angular

angular12