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
