如何以角度捕捉图像链接的宽度和高度?

时间:2019-01-11 18:05:29

标签: angular typescript

如果图像具有1000px x 1000px和jpg,我需要验证其链接。

示例:

https://www.w3schools.com/bootstrap/paris.jpg

我有此链接,我需要捕捉此图像的宽度和高度。

我认为这很容易解决jpg问题,我会在最后几个字符中添加一个子字符串,但是图像大小的问题我不知道如何找到角度。

有人有什么想法吗?谢谢。

3 个答案:

答案 0 :(得分:1)

我想分享我对这个问题的解决方案,因为我无法访问其他解决方案中给出的回调函数之外的图像高度和宽度。这是对我有用的解决方案:

let img = new Image();
img.src = "https://yourImageSource";

现在,如果您想使用图像高度/宽度,只需使用 img.naturalHeightimg.naturalWidth

注意:适用于我的 Angular 项目中的现代浏览器。

答案 1 :(得分:0)

创建指令并按如下方式使用该指令:

import { Directive,ElementRef,Renderer} from '@angular/core';

@Directive({
  selector:"[imgDimension]",
  host:{
    '(click)':"calculate()"
  }
})

export class GetImageDmnsn{ 

  constructor(private img:ElementRef){

  }
  calculate(){
    console.log('height:' + this.img.nativeElement.offsetHeight);
    console.log('width:' + this.img.nativeElement.offsetWidth);   
  }
}
<img imgDimension [src]="source">  

答案 2 :(得分:0)

这是JavaScript方式:

display_name

angular的工作示例:

Working Demo