Angular使用 ng-img-max 調整瀏覽器中的圖片的示例代碼
你想在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.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);
})
}
您現在可以將文件上傳到您的后端。 不要忘記在后端做好驗證，因為這里的內容會阻止一些用戶將超大或非圖像文件直接上傳到后端。
只限制寬度或高度
假設您只想將高度限制為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方法執(zhí)行有損壓縮，而不是調整圖像大小。 只需傳遞最大值（兆字節(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);
}
);
}
圖片預覽
您可能想要預覽要上傳到用戶的圖像。 您可以使用FileReader對象執(zhí)行此操作。 您還需要使用Angular的DomSanitizer來使其信任使用FileReader對象創(chuàng)建的base64編碼數據URI：
現在，我們的組件內容是這樣的。組件中有趣的新方法是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包，以獲得更多的瀏覽器端圖像處理（如裁剪）。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文用實例詳細給大家展示了angular.js分頁代碼，代碼很詳細，感興趣的小伙伴們可以參考一下2016-07-07
下面小編就為大家?guī)硪黄狝ngularJS中的指令全面解析(必看)。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
angularjs過濾器--filter與ng-repeat配合有奇效
本篇文章主要介紹了angularjs過濾器-filter與ng-repeat的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
利用Angular+Angular-Ui實現分頁（代碼加簡單）
這篇文章主要介紹了利用Angular+Angular-Ui實現分頁，利用Angular+Angular-Ui實現的分頁分頁代碼更加簡單，更加容易懂哦，相信本文的內容對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
本篇文章主要介紹了AngularJS中使用ngModal模態(tài)框實例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
BootStrap+Angularjs+NgDialog實現模式對話框
在完成一個后臺管理系統(tǒng)時，需要用表格顯示注冊用戶的信息。但是用戶地址太長了，不好顯示。所以想做一個模式對話框，點擊詳細地址按鈕時，彈出對話框，顯示地址。下面小編給大家分享下實現方法，一起看下吧2016-08-08
本文主要講解AngularJS表格的知識內容，這里整理了基礎資料，并附代碼和示例效果圖，有興趣的小伙伴可以參考下2016-08-08
angular6?Error:Debug?Failure?at?typeToString解決分析
這篇文章主要為大家介紹了angular6?Error:Debug?Failure?at?typeToString解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
本文介紹了AngularJS 多指令Scope問題的解決，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
本篇文章主要介紹了angular第三方包開發(fā)整理(小結)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04