Image Upload, Preview and Crop With Ngx-Image-Cropper In Angular

Introduction

In this tutorial we will cover how to upload an image, show an image preview by constructing a Base64 url and crop an image in angular.

We will use the ngx-image-cropper tool and talk about its customization and configuration properties.

You may add significant characteristics connected to an image file using the Image cropper for Angular plugin, which is accessible through the node package management.

Features of Ngx Image Cropper Library

A croped area of the image is turned into a Base64 URL in real-time. The image preview portion is shown using this Base64 URL. This base64 encoded string can be easily uploaded to the server and saved as a real image into JPG or PNG formats.

Let’s discuss the simple procedures we’ll need to build functionality for image selection and cropping from scratch.

Step 1:- Create New Angular Project

To create a new Angular project run the following command in terminal.

Step 2:- Install Bootstrap Package

To use the custom UI components, we require to install Bootstrap package in Angular app. Run the following command to command to install the package.

npm install bootstrap

Add bootstrap css into angular.json file:

"styles": [
             "src/styles.css",
             "node_modules/bootstrap/dist/css/bootstrap.min.css"
           ],

Step 3:- Install  Ngx Image Cropper Package

Here we will install the Ngx Image Cropper package which is very easy to install and use in the project.

Run following NPM command in terminal to install Image Cropper package:

npm install ngx-image-cropper –save

Step4:- Configure App Module

To use Image Cropper in our Angular Project we will need to import it in app.module.ts file as shown below:

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ImageCropperModule } from 'ngx-image-cropper';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ImageCropperModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 5:-Integrate Image Cropper in Angular

The procedure of implementing image cropper functionality is simple. To use image cropper simply add three element in html file Img, Input, ImageCropper.

Img : It is used to show image preview which is selected by ImageCropper.

Input : Input control of type file is required to select an image.

ImageCropper : The image-cropper component directive will display selected image with the cropper area with actual image.

Copy below code & paste it to your html file.

app.component.html

<div class="container mt-5 text-center">
  <h3 class="mb-5">Angular Image Crop Example</h3>
  <div class="row">
    <div class="col-md-12">
      <input type="file" (change)="onFileChange($event)" />
    </div>
    <div class="col-md-8">
      <image-cropper 
        [imageChangedEvent]="imgChangeEvt" 
        [maintainAspectRatio]="true"
        [aspectRatio]="4 /3" 
         format="png"
        (imageCropped)="cropImg($event)" 
        (imageLoaded)="imageLoad()" 
        (cropperReady)="initCropper()"
        (loadImageFailed)="imgFailed()">
      </image-cropper>
    </div>
    <div class="col-md-4">
      <h6>Image Preview</h6>
      <img [src]="cropImgPreview" style="border-radius:50%" width="400" height="400" />
    </div>
  </div>
  <button class="btn btn-dark" (click)="saveImage()">Download</button>
</div>

Now Update the app.component.ts file. First import ImageCroppedEvent from ngx-image-cropper. And also define method for  image cropper.

app.component.html

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 = 'cropImage';
    imgChangeEvt: any = '';
    cropImgPreview: any = '';
    onFileChange(event: any): void {
        this.imgChangeEvt = event;
    }
    cropImg(e: ImageCroppedEvent) {
        this.cropImgPreview = e.base64;
    }
    imageLoad() {
        // display cropper tool
    }
    initCropper() {
        // init cropper
    }
    imgFailed() {
        console.log("Croping Image failed..");
    }
    saveImage() {
        var image = this.cropImgPreview;
        var tmpLink = document.createElement('a');
        tmpLink.download = 'image.png';
        tmpLink.href = image;

        document.body.appendChild(tmpLink);
        tmpLink.click();
        document.body.removeChild(tmpLink);
    }
}

Step 6:- Run the Application

Now run the Angular application by hitting the following npm command in the CLI terminal.

npm start

OUTPUT:

Conclusion:

Finally, we integrate Image cropper in  angular application. The image cropping tool gives outputs as base64 URL. This base64 URL used to saving the image in any format.