头像截取ng2-img-cropper

文档：
https://github.com/cstefanache/angular2-img-cropper

安装：
npm i ng2-img-cropper --save

app.module.ts

import {ImageCropperComponent, CropperSettings} from 'ng2-img-cropper';
@NgModule({
  declarations: [
    AppComponent,
    ImageCropperComponent,
  ]

app.component.html

<div>
  <h4>文件内容上传1</h4>
  <div>
    <div class="file-upload">
      <span class="text">upload</span>
      <input id="custom-input" type="file" (change)="fileChangeListener($event)">
    </div>
    <img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper>
    <span class="result rounded" *ngIf="data.image" >
      <img [src]="data.image" [width]="cropperSettings.croppedWidth" [height]="cropperSettings.croppedHeight">
    </span>
  </div>
</div>

app.component.ts

import{FileUploader}from 'ng2-file-upload';
import {ImageCropperComponent, CropperSettings} from 'ng2-img-cropper';
    data:any;
@ViewChild('cropper', undefined)
cropper:ImageCropperComponent;
cropperSettings: CropperSettings;
constructor() {
    this.cropperSettings = new CropperSettings();
    this.cropperSettings.noFileInput = true;
    this.data = {};
}
fileChangeListener($event) {
    var image:any = new Image();
    var file:File = $event.target.files[0];
    var myReader:FileReader = new FileReader();
    var that = this;
    myReader.onloadend = function (loadEvent:any) {
        image.src = loadEvent.target.result;
        that.cropper.setImage(image);
    };
    myReader.readAsDataURL(file);
}

运行实例

image.png