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": [
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';
declarations: [AppComponent],
imports: [BrowserModule, ImageCropperModule],
providers: [],
bootstrap: [AppComponent],
export class AppModule {}
import { Component } from '@angular/core';
import { ImageCroppedEvent } from 'ngx-image-cropper';
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 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>
[aspectRatio]="4 / 4"
<div class="text-center col-md-4">
<img [src]="croppedImage" />
ng serve



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



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