Image Upload Preview Crop Zoom in Angular

Angular Image Cropper

• Step 1: Angular Environment Set up
• Step 2: Install Bootstrap Package
• Step 3: Add NGX Image Cropper Package
• Step 4: Register ImageCropperModule in App Module
• Step 5: Integrate Image Cropper in Angular component
• Step 6: Start Development Server

Set Up Angular Environment

• npm install -g @angular/cli
• ng new image-crop-app
• cd image-crop-app

Install Bootstrap Package

• npm install bootstrap

       Add bootstrap css into angular.json file:

"options": {

"outputPath": "dist/Crop-img-app",

"index": "src/index.html",

"main": "src/main.ts",

"polyfills": "src/polyfills.ts",

"tsConfig": "tsconfig.app.json",

"inlineStyleLanguage": "scss",

"assets": [

"src/favicon.ico",

"src/assets"

],

"styles": [

"src/styles.scss",

"node_modules/bootstrap/dist/css/bootstrap.min.css"

],

"scripts": []

},

Add NGX Image Cropper Package

• npm install ngx-image-cropper

Import ImageCropperModule in App Module

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

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

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

import { AppRoutingModule } from './app-routing.module';

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

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

FormsModule,

ReactiveFormsModule,

ImageCropperModule,

AppRoutingModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Integrate Image Cropper in Angular component

Implementing image cropper functionality is a facile process; so far, we have completed almost every setup.

Now, get into the TypeScript template import ImageCroppedEvent API; this will allow you to crop an uploaded image. It will convert the image file into Base64 format and show the cropped image preview.

Additionally, we added three custom functions for displaying the cropper component, starting the cropper component and showing an error message when the error occurred while uploading the file.

Add code into the app.component.ts file:

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 {

title = 'Crop-img-app';

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

}

}

Open and place below code in app.component.html file:

<div class="container mt-5 text-center">

<h3 class="mb-5">Angular Image Crop</h3>

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

[resizeToWidth]="256"

format="png"

(imageCropped)="cropImg($event)"

(imageLoaded)="imgLoad()"

(cropperReady)="initCropper()"

(loadImageFailed)="imgFailed()">

</image-cropper>

</div>

<div class="col-md-4">

<h6>Image Preview</h6>

<img [src]="cropImgPreview" />

</div>

</div>

Start Development Server

• ng serve