Angular图像裁剪器 - ngx-image-cropper

Angular图像裁剪器 - ngx-image-cropper
插件名称 ngx-image-cropper
发布时间 2020年6月17日
插件作者 Mawi137

一个简单的轻量级图像裁剪组件,用于Angular 2/4/5 +。

安装:

# NPM
$ npm install ngx-image-cropper --save

用法示例

将ImageCropperModule添加到将使用Image Cropper的模块的导入中。

import { NgModule } from '@angular/core';
import { ImageCropperModule } from 'ngx-image-cropper';

@NgModule({
    imports: [
        ...
        ImageCropperModule
    ],
    declarations: [
        ...
    ],
    exports: [
        ...
    ],
    providers: [
        ...
    ]
})
export class YourModule {
}

将元素添加到HTML:

<input type="file" (change)="fileChangeEvent($event)" />

<image-cropper
    [imageChangedEvent]="imageChangedEvent"
    [maintainAspectRatio]="true"
    [aspectRatio]="4 / 3"
    format="png"
    (imageCropped)="imageCropped($event)"
    (imageLoaded)="imageLoaded()"
    (cropperReady)="cropperReady()"
    (loadImageFailed)="loadImageFailed()"
></image-cropper>

<img [src]="croppedImage" />

并将其添加到您的ts文件中:

import { ImageCroppedEvent } from 'ngx-image-cropper';

export class YourComponent {
    imageChangedEvent: any = '';
    croppedImage: any = '';
    
    fileChangeEvent(event: any): void {
        this.imageChangedEvent = event;
    }
    imageCropped(event: ImageCroppedEvent) {
        this.croppedImage = event.base64;
    }
    imageLoaded() {
        // 显示cropper
    }
    cropperReady() {
        // cropper 准备好了
    }
    loadImageFailed() {
        // j显示消息
    }
}

当您从文件输入中选择一个文件时,它将触发fileChangeEvent。然后将该事件传递给图像裁剪器,通过imageChangedEvent该图像裁剪器将图像加载到裁剪器中。每次释放鼠标时,imageCropped事件都会以裁剪后的图像作为有效负载中的Base64字符串触发。