以角度 2 获取图像尺寸

Question

我正在编写代码来上传图像文件。在调用上传函数之前，我需要知道将上传的图像的尺寸（高度和宽度）。

有没有办法在角度 2 中提取图像尺寸？如果是这样，如何？

Answer 1

使用 Angular2 方法，我将创建一个自定义指令来获取任何元素的高度和宽度。对于img，我将在img标签中应用它（指令），每当我想获取 img 的高度和宽度时，我只需要单击它。您可以根据自己的需要进行修改。

演示：https : //plnkr.co/edit/3tibSEJCF734KQ3PBNZc? p =preview

指令.ts

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

@Directive({
  selector:"[getHeightWidth]",
  host:{
    '(click)':"show()"
  }
})

export class GetEleDirective{ 

  constructor(private el:ElementRef){

  }
  show(){
    console.log(this.el.nativeElement);

    console.log('height---' + this.el.nativeElement.offsetHeight);
    console.log('width---' + this.el.nativeElement.offsetWidth);   
  }
}

应用程序

@Component({
  selector: 'my-app',
  template: `

  <div style="width:200px;height:300px">
       <img getHeightWidth                 <!-- here I'm using getHeightWidth directive-->
            [src]="source" alt="Angular2" 
            width="100%" 
            height="100%">  
   </div>
  `,

})
export class AppComponent {
  source='images/angular.png';
}

Answer 2

我创建了获取图像大小的函数

getImgSize(imageSrc: string): Observable<ISize> {
    let mapLoadedImage = (event): ISize => {
        return {
            width: event.target.width,
            height: event.target.height
        };
    }
    var image = new Image();
    let $loadedImg = fromEvent(image, "load").pipe(take(1), map(mapLoadedImage));
    // Rxjs 4 - let $loadedImg = Observable.fromEvent(image, "load").take(1).map(mapLoadedImage);
    image.src = imageSrc;
    return $loadedImg;
}

interface ISize { width: number; height: number; } 您也可以订阅 html 中的加载事件 <img (load)="loadedImg($event)" [src]="imageSrc">并从中获取大小。

Answer 3

如果您需要在 ts 文件中获取图像大小：

getImageDimension(image): Observable<any> {
    return new Observable(observer => {
        const img = new Image();
        img.onload = function (event) {
            const loadedImage: any = event.currentTarget;
            image.width = loadedImage.width;
            image.height = loadedImage.height;
            observer.next(image);
            observer.complete();
        }
        img.src = image.url;
    });
}

调用上面的方法：

const image = {
  url: 'https://kalgudi.com/store/assets/images/e-mahila1.jpg',
  context: 'Mahila self help group'
}
this.getImageDimension(image).subscribe(
   response => { 
     console.log(response);
   }
);

Answer 4

只需使用以下代码即可获取图像的宽度和高度（分辨率）。

HTML 代码

<img #pic [src]="imgURL" (load)="onLoad()>

有角度

@ViewChild('pic', { static: false }) pic: ElementRef;
onLoad() {
   console.log((this.pic.nativeElement as HTMLImageElement).naturalWidth);
   console.log((this.pic.nativeElement as HTMLImageElement).naturalHeight);
 }