Description
An Angular Image Cropper
UI-Components Module
Add CropperComponent and ImageCropperComponent
into your UIComponentsModule
class.
ui-components.module.ts
would look like this
import {NgModule} from '@angular/core';
import { ImageCropperModule } from 'ngx-image-cropper';
import { CropperComponent } from './extra/cropper/cropper.component';
@NgModule({
declarations: [CropperComponent, ImageCropperModule]
})
export class UIComponentsModule { }
Cropper Markup
cropper.component.html
would look like this
<div class="file-upload">
<span class="text">upload</span>
<input id="custom-input" type="file" (change)="fileChangeEvent($event)">
</div>
<image-cropper [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="true" [aspectRatio]="4 / 3"
format="png" (imageCropped)="imageCropped($event)" (imageLoaded)="imageLoaded()"
(cropperReady)="cropperReady()" (loadImageFailed)="loadImageFailed()" class="float-left mr-4 img-fluid"></image-cropper>
<br>
<span class="result rounded">
<img [src]="croppedImage" class="rounded-circle">
</span>
Cropper Component
cropper.component.ts
would look like this
import { Component, ViewChild } from '@angular/core';
import { ImageCroppedEvent } from 'ngx-image-cropper';
@Component({
selector: 'app-cropper',
templateUrl: './cropper.component.html',
styleUrls: ['./cropper.component.scss']
})
export class CropperComponent {
imageChangedEvent: any = '';
croppedImage: any = '';
fileChangeEvent(event: any): void {
this.imageChangedEvent = event;
}
imageCropped(event: ImageCroppedEvent) {
this.croppedImage = event.base64;
}
imageLoaded() {
// show cropper
}
cropperReady() {
// cropper ready
}
loadImageFailed() {
// show message
}
}
Refer following links for usage:
Type | URL |
---|---|
Plugin Github Page | https://github.com/cstefanache/angular2-img-cropper |
Template Page | https://demos.pixinvent.com/apex-angular-admin-template/demo-1/components/cropper |