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} 即可

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

頁面代碼↓

<div id="container1">

    <img id="image" style="display: none" src="../../../assets/image/chelun.gif">
    <input type="file" (change)="fileChangeEvent($event)" />

    <image-cropper [imageChangedEvent]="imageChangedEvent" [imageBase64]="base64String" [maintainAspectRatio]="true" [aspectRatio]="1 / 1" [resizeToWidth]="200" resizeToHeight="200" format="png" (imageCropped)="imageCropped($event)" (imageLoaded)="imageLoaded()"
        (cropperReady)="cropperReady()" (loadImageFailed)="loadImageFailed()"></image-cropper>

    <img [src]="croppedImage" />

</div>

import { Component, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';  2 // import Cropper from 'cropperjs';
import { ImageCroppedEvent } from 'ngx-image-cropper';  4 
@Component({  6   selector: 'app-image-cropperjs',  7   templateUrl: './image-cropperjs.component.html',  8   //styleUrls: ['./image-cropperjs.component.css']
 encapsulation: ViewEncapsulation.None 10 }) 11 export class ImageCropperjsComponent implements AfterViewInit { 12 
  ngAfterViewInit(): void { 14     this.getBase64(`http://${window.location.host}/assets/image/chelun.gif`)
 } 16 
 getBase64(imgUrl) { 18     const self = this; 19     var xhr = new XMLHttpRequest(); 20     xhr.open("get", imgUrl, true); 21     // 至關重要
    xhr.responseType = "blob"; 23     xhr.onload = function () { 24       if (this.status == 200) { 25         //得到一個blob對象
        var blob = this.response; 27         console.log("blob", blob) 28         // 至關重要
        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         //====為了在頁面顯示圖片，可以刪除====

 } 47  } 48  xhr.send(); 49  } 50  base64String: any; 51   imageChangedEvent: any = ''; 52   croppedImage: any = ''; 53 
  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
 } 64  cropperReady() { 65     // cropper ready
 } 67  loadImageFailed() { 68     // show message
 } 70  cropper: any; 71  constructor() { } 72 
 ngOnInit() { 74 
 } 76 
  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()方法是加的一個默認圖片顯示，也可以手動選擇文件

通過此示例我們可以做一些圖片上傳裁剪，修改的操作，保存小圖片，非常方便