Angular Image Upload with Crop, Zoom, Scale, Preview Tutorial

By Hardik Savani | June 17, 2020 | Category : Angular


This post will give you example of angular image cropper example. you can see image upload with crop in angular. i would like to show you image upload with crop zoom scale and preview in angular, you can also download cope image in base64. it's simple example of angular image upload with crop example.

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 application.

In this example, i will give you step by step explanation how you can image upload in crop in angular 6, angular 7, angular 8, angular 9, angular 10 and angular 11 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 app:

Run Angular App:

ng serve

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: