Angular 9/8 Image Upload and Cropper with Preview Example

By Hardik Savani October 20, 2023 Category : Angular

I am going to explain you example of angular 9 image cropper with Crop, Zoom, Scale, and Preview functionality while uploading. In this article, we will implement a image upload with crop in angular 9. i would like to show you angular 9/8 image upload with crop example. We will use ngx-image-cropper angular 9 example. follow bellow step for angular 9 image cropper example step by step.

If you need to use image upload with crop then you can easily use ngx-image-cropper npm package. it will provide you Cropping, Zooming, Scaling, and Preview functionality while uploading time. it's very easily use with your angular 8 and angular 9 application.

In this example, i will give you step by step explanation how you can image upload in crop in angular 8/9 application. you can also see bellow screenshot for demo.

Preview:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new ngImageCrop

Step 2: Install Npm Packages

In this step, we will install ngx-image-cropper npm package for upload image crop function in angular. so let's run both command:

npm install ngx-image-cropper --save

Step 3: Import ImageCropperModule

Now, here we will import ImageCropperModule from ngx-image-cropper and then we add on declarations part. so let's update app.module.ts file as like bellow:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

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

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

ImageCropperModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Step 4: Update Component ts File

Here, we will update app.component.ts file here, in this file we will write fileChangeEvent(), imageCropped(), imageLoaded(), cropperReady() and loadImageFailed() that provided by ngx-image-cropper.

You can update as bellow app.component.ts file.

src/app/app.component.ts

import { Component } from '@angular/core';

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'ngImageCrop';

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 */

}

}

Step 5: Update HTML File

I used bootstrap class on this form. if you want to add than then follow this link too: Install Boorstrap 4 to Angular 9.

Here, we will update html file as like bellow, so update it as like bellow:

src/app/app.component.html

<div class="container">

<div class="card">

<div class="card-header">

Angular Crop Image Tutorial Example - ItSolutionStuff.com

</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>

Now you can run angular 9 app:

Run Angular App:

ng serve

I hope it can help you...

Shares