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';
 import { NgModule } from '@angular/core';

 import { AppComponent } from './app.component';
 import { ImageCropperjsComponent } from './cropperjs/image-cropperjs/image-cropperjs.component';
 import { ImageCropperModule } from 'ngx-image-cropper';

 @NgModule({
   declarations: [
     AppComponent,
     ImageCropperjsComponent
   ],
   imports: [
     BrowserModule, ImageCropperModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 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]="" resizeToHeight="" 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';
 // import Cropper from 'cropperjs';
 import { ImageCroppedEvent } from 'ngx-image-cropper';

 @Component({
   selector: 'app-image-cropperjs',
   templateUrl: './image-cropperjs.component.html',
   //styleUrls: ['./image-cropperjs.component.css']
   encapsulation: ViewEncapsulation.None
 })
 export class ImageCropperjsComponent implements AfterViewInit {

   ngAfterViewInit(): void {
     this.getBase64(`http://${window.location.host}/assets/image/chelun.gif`)
   }

   getBase64(imgUrl) {
     const self = this;
     var xhr = new XMLHttpRequest();
     xhr.open("get", imgUrl, true);
     // 至关重要
     xhr.responseType = "blob";
     xhr.onload = function () {
       if (this.status == ) {
         //得到一个blob对象
         var blob = this.response;
         console.log("blob", blob)
         // 至关重要
         let oFileReader = new FileReader();
         oFileReader.onloadend = function (e) {
           let base64 = e.target;
           self.base64String = (<any>base64).result;
           console.log("方式一》》》》》》》》》", base64)
         };
         oFileReader.readAsDataURL(blob);
         //====为了在页面显示图片，可以删除====
         // var img = document.createElement("img");
         // img.onload = function (e) {
         //   window.URL.revokeObjectURL(img.src); // 清除释放
         // };
         // let src = window.URL.createObjectURL(blob);
         // img.src = src
         // document.getElementById("container1").appendChild(img);
         //====为了在页面显示图片，可以删除====

       }
     }
     xhr.send();
   }
   base64String: any;
   imageChangedEvent: any = '';
   croppedImage: any = '';

   fileChangeEvent(event: any): void {
     debugger
     this.imageChangedEvent = event;
   }
   imageCropped(event: ImageCroppedEvent) {
     this.croppedImage = event.base64;
   }
   imageLoaded() {
     // show cropper
   }
   cropperReady() {
     // cropper ready
   }
   loadImageFailed() {
     // show message
   }
   cropper: any;
   constructor() { }

   ngOnInit() {

   }

   getImgUrl($event) {
     debugger
     let data = window.URL.createObjectURL($event.path[].files[]);
     this.cropper.replace(data);
     console.log($event);
   }
   rotateRight() {
     debugger
     console.log(this.cropper.getData());
     this.cropper.rotate();
   }
 }

示例中 getBase64()方法是加的一个默认图片显示，也可以手动选择文件

通过此示例我们可以做一些图片上传裁剪，修改的操作，保存小图片，非常方便