Angular使用 ng-img-max 調(diào)整瀏覽器中的圖片的示例代碼
你想在Angular應(yīng)用程序中進行圖片上傳，是否想在圖片上傳之前在前端限制上傳圖片的尺寸？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配置后，您將需要重新啟動本地服務(wù)。
現(xiàn)在我們將模塊導(dǎo)入應(yīng)用模塊或功能模塊：
//: app.module.ts
//...
import { Ng2ImgMaxModule } from 'ng2-img-max';
@NgModule({
declarations: [ AppComponent ],
imports: [
//...
ng2ImgMaxModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule {}
最后，ng2-img-max服務(wù)可以導(dǎo)入并注入到這樣的組件中：
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);
})
}
如果您有多個圖像需要一次性調(diào)整大小，請改用resize方法，并將圖片文件數(shù)組作為第一個參數(shù)傳入。
結(jié)果是Blob類型，但是如果需要，可以使用File構(gòu)造函數(shù)將其轉(zhuǎn)換為正確的文件：
//: app.component.ts
uploadedImage: 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);
})
}
您現(xiàn)在可以將文件上傳到您的后端。 不要忘記在后端做好驗證，因為這里的內(nèi)容會阻止一些用戶將超大或非圖像文件直接上傳到后端。
只限制寬度或高度
假設(shè)您只想將高度限制為300px，并相應(yīng)調(diào)整寬度，以保持寬高比相同。 只要設(shè)置任何一閥值到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方法執(zhí)行有損壓縮，而不是調(diào)整圖像大小。 只需傳遞最大值（兆字節(jié)）。 你顯然想要運行一些測試，看看你想要走多遠的幾個小時，同時保持圖像看起來很好。
在以下示例中，我們將生成的圖像限制為大約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);
}
);
}
圖片預(yù)覽
您可能想要預(yù)覽要上傳到用戶的圖像。 您可以使用FileReader對象執(zhí)行此操作。 您還需要使用Angular的DomSanitizer來使其信任使用FileReader對象創(chuàng)建的base64編碼數(shù)據(jù)URI：
現(xiàn)在，我們的組件內(nèi)容是這樣的。組件中有趣的新方法是getImagePreview：
//: app.component.ts
import { 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包，以獲得更多的瀏覽器端圖像處理（如裁剪）。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文用實例詳細給大家展示了angular.js分頁代碼，代碼很詳細，感興趣的小伙伴們可以參考一下2016-07-07
下面小編就為大家?guī)硪黄狝ngularJS中的指令全面解析(必看)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
angularjs過濾器--filter與ng-repeat配合有奇效
本篇文章主要介紹了angularjs過濾器-filter與ng-repeat的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
利用Angular+Angular-Ui實現(xiàn)分頁（代碼加簡單）
這篇文章主要介紹了利用Angular+Angular-Ui實現(xiàn)分頁，利用Angular+Angular-Ui實現(xiàn)的分頁分頁代碼更加簡單，更加容易懂哦，相信本文的內(nèi)容對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
BootStrap+Angularjs+NgDialog實現(xiàn)模式對話框
angular6?Error:Debug?Failure?at?typeToString解決分析
