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]="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';
// 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 == 200) {
        //得到一个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[0].files[0]);
    this.cropper.replace(data);
    console.log($event);
  }
  rotateRight() {
    debugger
    console.log(this.cropper.getData());
    this.cropper.rotate(90);
  }
}

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

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