Angular中ngx-image-cropper圖片裁剪的使用

GitHub示例源碼地址：https://github.com/luoruiemail/ngx-image-cropper

下載下來以後，執行yarn install安裝相關node_modules包

而後在目錄執行npm start 瀏覽器中訪問http://localhost:4200/ 就能夠看到示例效果了 ↓

---

 

代碼以下↓

將_{ImageCropperModule}添加到模塊的導入中，若未安裝此包，在_{Windows PowerShell}中執行_{yarn add ngx-image-cropper} 便可

 1 import { BrowserModule } from '@angular/platform-browser';  2 import { NgModule } from '@angular/core';  3 
 4 import { AppComponent } from './app.component';  5 import { ImageCropperjsComponent } from './cropperjs/image-cropperjs/image-cropperjs.component';  6 import { ImageCropperModule } from 'ngx-image-cropper';  7 
 8 @NgModule({  9  declarations: [ 10  AppComponent, 11  ImageCropperjsComponent 12  ], 13  imports: [ 14  BrowserModule, ImageCropperModule 15  ], 16  providers: [], 17  bootstrap: [AppComponent] 18 }) 19 export class AppModule { }

頁面代碼↓

 1 <div id="container1">
 2 
 3     <img id="image" style="display: none" src="../../../assets/image/chelun.gif">
 4     <input type="file" (change)="fileChangeEvent($event)" />
 5 
 6     <image-cropper [imageChangedEvent]="imageChangedEvent" [imageBase64]="base64String" [maintainAspectRatio]="true" [aspectRatio]="1 / 1" [resizeToWidth]="200" resizeToHeight="200" format="png" (imageCropped)="imageCropped($event)" (imageLoaded)="imageLoaded()"
 7         (cropperReady)="cropperReady()" (loadImageFailed)="loadImageFailed()"></image-cropper>
 8 
 9     <img [src]="croppedImage" />
10 
11 </div>

 1 import { Component, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';  2 // import Cropper from 'cropperjs';
 3 import { ImageCroppedEvent } from 'ngx-image-cropper';  4 
 5 @Component({  6   selector: 'app-image-cropperjs',  7   templateUrl: './image-cropperjs.component.html',  8   //styleUrls: ['./image-cropperjs.component.css']
 9  encapsulation: ViewEncapsulation.None 10 }) 11 export class ImageCropperjsComponent implements AfterViewInit { 12 
13   ngAfterViewInit(): void { 14     this.getBase64(`http://${window.location.host}/assets/image/chelun.gif`)
15  } 16 
17  getBase64(imgUrl) { 18     const self = this; 19     var xhr = new XMLHttpRequest(); 20     xhr.open("get", imgUrl, true); 21     // 相當重要
22     xhr.responseType = "blob"; 23     xhr.onload = function () { 24       if (this.status == 200) { 25         //獲得一個blob對象
26         var blob = this.response; 27         console.log("blob", blob) 28         // 相當重要
29         let oFileReader = new FileReader(); 30         oFileReader.onloadend = function (e) { 31           let base64 = e.target; 32           self.base64String = (<any>base64).result; 33           console.log("方式一》》》》》》》》》", base64) 34  }; 35  oFileReader.readAsDataURL(blob); 36         //====爲了在頁面顯示圖片，能夠刪除==== 37         // var img = document.createElement("img"); 38         // img.onload = function (e) { 39         // window.URL.revokeObjectURL(img.src); // 清除釋放 40         // }; 41         // let src = window.URL.createObjectURL(blob); 42         // img.src = src 43         // document.getElementById("container1").appendChild(img); 44         //====爲了在頁面顯示圖片，能夠刪除====
45 
46  } 47  } 48  xhr.send(); 49  } 50  base64String: any; 51   imageChangedEvent: any = ''; 52   croppedImage: any = ''; 53 
54   fileChangeEvent(event: any): void { 55  debugger 56     this.imageChangedEvent = event; 57  } 58   imageCropped(event: ImageCroppedEvent) { 59     this.croppedImage = event.base64; 60  } 61  imageLoaded() { 62     // show cropper
63  } 64  cropperReady() { 65     // cropper ready
66  } 67  loadImageFailed() { 68     // show message
69  } 70  cropper: any; 71  constructor() { } 72 
73  ngOnInit() { 74 
75  } 76 
77   getImgUrl($event) { 78  debugger 79     let data = window.URL.createObjectURL($event.path[0].files[0]); 80     this.cropper.replace(data); 81     console.log($event); 82  } 83  rotateRight() { 84  debugger 85     console.log(this.cropper.getData()); 86     this.cropper.rotate(90); 87  } 88 }

示例中 getBase64()方法是加的一個默認圖片顯示，也能夠手動選擇文件

經過此示例咱們能夠作一些圖片上傳裁剪，修改的操做，保存小圖片，很是方便