Angular 13 Crop Image Before Upload With Preview

npm install -g @angular/cling new ng-crop-img-appcd ng-crop-img-app
npm install bootstrap
...
...
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
...
...
npm install ngx-image-cropper --save
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ImageCropperModule } from 'ngx-image-cropper';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, ImageCropperModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
import { Component } from '@angular/core';
import { ImageCroppedEvent } from 'ngx-image-cropper';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
imgChangeEvt: any = '';
cropImgPreview: any = '';
onFileChange(event: any): void {
this.imgChangeEvt = event;
}
cropImg(e: ImageCroppedEvent) {
this.cropImgPreview = e.base64;
}
imgLoad() {
// display cropper tool
}
initCropper() {
// init cropper
}

imgFailed() {
// error msg
}
}
<div class="container">
<div class="card">
<div class="card-header">
Angular 13 Crop Image Before Upload With Preview - Websolutionstuff
</div>
<div class="card-body">
<input type="file" (change)="fileChangeEvent($event)" />
<div class="row" style="margin-top: 15px;">
<div class="text-center col-md-8">
<h5>Crop Image</h5>
<image-cropper
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="true"
[aspectRatio]="4 / 4"
[resizeToWidth]="256"
format="png"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()"></image-cropper>
</div>
<div class="text-center col-md-4">
<h5>Preview</h5>
<img [src]="croppedImage" />
</div>
</div>
</div>
</div>
</div>
ng serve
http://localhost:4200

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Websolutionstuff

Websolutionstuff

I am Laravel and PHP Developer. I have also Good Knowledge of JavaScript, jQuery, Bootstrap and REST API.