你想在Angular應用程序中進行圖片上傳，是否想在圖片上傳之前在前端限制上傳圖片的尺寸？ng2-img-max模塊正是你所要的! ng2-img-max模塊會使用web sorkers 進行圖片大小的計算，并駐留在主線程中。
我們來看看他的用途：
安裝
首先，使用npm 或 Yarn安裝模塊：
$ npm install ng2-img-max blueimp-canvas-to-blob --save# or Yarn :$ yarn add ng2-img-max blueimp-canvas-to-blob
blueimp-canvas-to-blob是一個polyfill，以便canvas.toBlob（）可以在Safari和舊版本的Internet Explorer等瀏覽器上使用。
將polyfill腳本包含在項目中。 如果您使用Angular CLI，您可以將腳本添加到.angular-cli.json文件中：
//: .angular-cli.json..."scripts": [ "../node_modules/blueimp-canvas-to-blob/js/canvas-to-blob.min.js"],//...
將腳本添加到Angular CLI配置后，您將需要重新啟動本地服務。
現在我們將模塊導入應用模塊或功能模塊：
//: app.module.ts//...import { Ng2ImgMaxModule } from 'ng2-img-max';@NgModule({ declarations: [ AppComponent ], imports: [ //... ng2ImgMaxModule ], providers: [], bootstrap: [ AppComponent ]})export class AppModule {}最后，ng2-img-max服務可以導入并注入到這樣的組件中：
import { Component } from '@angular/core';import { Ng2ImgMaxService } from 'ng2-img-max';@Component({ ... })export class AppComponent { constructor(private ng2ImgMax: Ng2ImgMaxService ) {}}使用
我們添加一個File文件輸入框到組件的模板中，像這樣：
<input type='file' (change)="onImageChange($event)" accept="image/*" />
在組件類中添加方法onImageChange, 它將會限制圖片的寬高為：400px,300px:
updateImage: Blob;constructor(private ng2ImgMax: Ng2ImgMaxService) {}onImageChange(event){ let image = event.target.files[0]; this.ng2ImgMax.resizeImage(image,400,300).subscribe(result=> { this.uploadImage = result; }, error=> { console.log('error:',error); })}如果您有多個圖像需要一次性調整大小，請改用resize方法，并將圖片文件數組作為第一個參數傳入。
結果是Blob類型，但是如果需要，可以使用File構造函數將其轉換為正確的文件：
//: app.component.tsuploadedImage: File;constructor(private ng2ImgMax: Ng2ImgMaxService) {}onImageChange(event){ let image = event.target.files[0]; this.ng2ImgMax.resizeImage(image,400,300).subscribe(result=> { this.uploadedImage = new File([result],result.name); }, error=> { console.log('error',error); })}您現在可以將文件上傳到您的后端。 不要忘記在后端做好驗證，因為這里的內容會阻止一些用戶將超大或非圖像文件直接上傳到后端。
只限制寬度或高度
假設您只想將高度限制為300px，并相應調整寬度，以保持寬高比相同。 只要設置任何一閥值到10000：
//...onImageChange(event) { let image = event.target.files[0]; this.ng2ImgMax.resizeImage(image,10000,300).subscribe(result=> { this.uploadedImage = new File([result],result.name); }, error=> { console.log('error:',error); });}壓縮代替Resizing
您還可以使用compress或compressImage方法執行有損壓縮，而不是調整圖像大小。 只需傳遞最大值（兆字節）。 你顯然想要運行一些測試，看看你想要走多遠的幾個小時，同時保持圖像看起來很好。
在以下示例中，我們將生成的圖像限制為大約75Kb：
onImageChange(event) { let image = event.target.files[0]; this.ng2ImgMax.compressImage(image, 0.075).subscribe( result => { this.uploadedImage = new File([result], result.name); this.getImagePreview(this.uploadedImage); }, error => { console.log('😢 Oh no!', error); } );}圖片預覽
您可能想要預覽要上傳到用戶的圖像。 您可以使用FileReader對象執行此操作。 您還需要使用Angular的DomSanitizer來使其信任使用FileReader對象創建的base64編碼數據URI：
現在，我們的組件內容是這樣的。組件中有趣的新方法是getImagePreview：
//: app.component.tsimport { Component } from '@angular/core';import { Ng2ImgMaxService } from 'ng2-img-max';import { DomSanitizer } from '@angular/platform-browser';@Component({ ... })export class AppComponent { uploadedImage: File; imagePreview: string; constructor( private ng2ImgMax: Ng2ImgMaxService, public sanitizer: DomSanitizer ) {} onImageChange(event) { let image = event.target.files[0]; this.ng2ImgMax.resizeImage(image, 10000, 375).subscribe( result => { this.uploadedImage = new File([result], result.name); this.getImagePreview(this.uploadedImage); }, error => { console.log('😢 Oh no!', error); } ); } getImagePreview(file: File) { const reader: FileReader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { this.imagePreview = reader.result; }; }}在我們的模板中，我們可以使用sanitizer來顯示如圖像：
//: app.component.html<img *ngIf="imagePreview" [src]="sanitizer.bypassSecurityTrustUrl(imagePreview)">
這就是它的全部！ 您還可以查看同一作者的ng2-img-tools包，以獲得更多的瀏覽器端圖像處理（如裁剪）。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
