Aspnetzero + Angular Image Cropper

使用的控件为：ngx-img-cropper

Install from NPM

npm i ngx-img-cropper --save

ts文件修改

ts中导入引用：

import { CropperSettings, ImageCropperComponent } from "ngx-img-cropper";

类中声明成员变量：

data: any;
@ViewChild('cropper', undefined) cropper: ImageCropperComponent;
cropperSettings: CropperSettings;

构造函数中初始化变量：

this.cropperSettings = new CropperSettings();
this.cropperSettings.width = 100;
this.cropperSettings.height = 150;
this.cropperSettings.noFileInput = true;
this.cropperSettings.keepAspect = true;
this.cropperSettings.preserveSize = 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);
 }

模板修改

html模板文件：

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

模块修改

在所在模块(如admin.module.ts)中添加引用：

import { ImageCropperComponent } from "ngx-img-cropper";

并在模块的@NgModule的declarations中添加声明：

ImageCropperComponent