快捷導(dǎo)航

Angular使用 ng-img-max 調(diào)整瀏覽器中的圖片的示例代碼

更新時(shí)間：2017年08月17日 09:20:25 作者：mntx

本篇文章主要介紹了Angular使用 ng-img-max 調(diào)整瀏覽器中的圖片的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下

你想在Angular應(yīng)用程序中進(jìn)行圖片上傳，是否想在圖片上傳之前在前端限制上傳圖片的尺寸？ng2-img-max模塊正是你所要的! ng2-img-max模塊會(huì)使用web sorkers 進(jìn)行圖片大小的計(jì)算，并駐留在主線程中。

我們來(lái)看看他的用途：

安裝

首先，使用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是一個(gè)polyfill，以便canvas.toBlob（）可以在Safari和舊版本的Internet Explorer等瀏覽器上使用。

將polyfill腳本包含在項(xiàng)目中。如果您使用Angular CLI，您可以將腳本添加到.angular-cli.json文件中：

//: .angular-cli.json

...
"scripts": [
 "../node_modules/blueimp-canvas-to-blob/js/canvas-to-blob.min.js"
],
//...

將腳本添加到Angular CLI配置后，您將需要重新啟動(dòng)本地服務(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 ) {}
}

使用

我們添加一個(gè)File文件輸入框到組件的模板中，像這樣：

<input type='file' (change)="onImageChange($event)" accept="image/*" />

在組件類(lèi)中添加方法onImageChange, 它將會(huì)限制圖片的寬高為：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);
 })
}

如果您有多個(gè)圖像需要一次性調(diào)整大小，請(qǐng)改用resize方法，并將圖片文件數(shù)組作為第一個(gè)參數(shù)傳入。

結(jié)果是Blob類(lèi)型，但是如果需要，可以使用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)在可以將文件上傳到您的后端。不要忘記在后端做好驗(yàn)證，因?yàn)檫@里的內(nèi)容會(huì)阻止一些用戶將超大或非圖像文件直接上傳到后端。

只限制寬度或高度

假設(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é)）。你顯然想要運(yùn)行一些測(cè)試，看看你想要走多遠(yuǎn)的幾個(gè)小時(shí)，同時(shí)保持圖像看起來(lái)很好。

在以下示例中，我們將生成的圖像限制為大約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對(duì)象執(zhí)行此操作。您還需要使用Angular的DomSanitizer來(lái)使其信任使用FileReader對(duì)象創(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來(lái)顯示如圖像：

//: app.component.html

<img
  *ngIf="imagePreview"
  [src]="sanitizer.bypassSecurityTrustUrl(imagePreview)">

這就是它的全部！您還可以查看同一作者的ng2-img-tools包，以獲得更多的瀏覽器端圖像處理（如裁剪）。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

angular.js分頁(yè)代碼的實(shí)例
本文用實(shí)例詳細(xì)給大家展示了angular.js分頁(yè)代碼，代碼很詳細(xì)，感興趣的小伙伴們可以參考一下
2016-07-07
AngularJS中的指令全面解析(必看)
下面小編就為大家?guī)?lái)一篇AngularJS中的指令全面解析(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
angularjs過(guò)濾器--filter與ng-repeat配合有奇效
本篇文章主要介紹了angularjs過(guò)濾器-filter與ng-repeat的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-04-04
利用Angular+Angular-Ui實(shí)現(xiàn)分頁(yè)（代碼加簡(jiǎn)單）
這篇文章主要介紹了利用Angular+Angular-Ui實(shí)現(xiàn)分頁(yè)，利用Angular+Angular-Ui實(shí)現(xiàn)的分頁(yè)分頁(yè)代碼更加簡(jiǎn)單，更加容易懂哦，相信本文的內(nèi)容對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-03-03
本篇文章主要介紹了AngularJS中使用ngModal模態(tài)框?qū)嵗?，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05

BootStrap+Angularjs+NgDialog實(shí)現(xiàn)模式對(duì)話框

在完成一個(gè)后臺(tái)管理系統(tǒng)時(shí)，需要用表格顯示注冊(cè)用戶的信息。但是用戶地址太長(zhǎng)了，不好顯示。所以想做一個(gè)模式對(duì)話框，點(diǎn)擊詳細(xì)地址按鈕時(shí)，彈出對(duì)話框，顯示地址。下面小編給大家分享下實(shí)現(xiàn)方法，一起看下吧

2016-08-08