Angular 12 Image Uploader Example – Crop, Preview, Zoom & Scale Features

Angular Image Uploader component will be explained in this tutorial with Crop, Preview, Zoom, and Scaling features.

In this post, we will focus on how to create an Angular image uploader, with a real-time preview box.  We will also discuss how to zoom, crop, scale the image before uploading to the server and preview it in the Angular application.

Adding all features like preview, cropping, zooming, and scaling  is very simple and quick for which we will use the much popular ngx-image-cropper npm package.

Let’s quickly go through the steps which we are going to follow to integrate the Image Cropper tool in the Angular application.

How to Add Image Cropper in Angular?

• Step 1) Create Angular Application
• Step 2) Add Bootstrap CSS for Styling
• Step 3) Install Ngx Image Cropper Package
• Step 4) Update AppModule with ImageCropperModule
• Step 5) Implement Image Cropper Component in Angular View
• Step 6) Serve Angular Application

Create Angular Application

To start with the Angular project, make sure you have Angular CLI installed. Angular CLI provided a number of helpful commands during development.

npm install -g @angular/cli

After the Angular CLI installed, create a new application by hitting ng command

ng new angular-image-cropper-app

Enter the project directory

cd angular-image-cropper-app

Add Bootstrap CSS for Styling

To style out the UI component, we need to install the Bootstrap package in our Angular application.

Run below npm command to install the package.

npm install bootstrap

Include bootstrap.min.css file in the angular.json under "styles" property

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

Alternatively, you can simply include bootstrap.css in index.html file.

Install NGX Image Cropper Package

Now, install the ngx-image-cropper package in the Angular application

npm install ngx-image-cropper

Update AppModule with ImageCropperModule

Once the package is installed, to access the image cropper’s feature methods and input properties, import the ImageCropperModule in the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

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

export class AppModule { }

Implement Image Cropper Component in Angular View

Let’s get our hands dirty. Now we will update our Component to show an Image Cropper with all the feature which we discussed so far.

Add following code in 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 {

    onImageChanged: any = '';
    cropedImagePreview: any = '';

    onFileChange(event: any): void {
        this.onImageChanged= event;
    }
    cropImg(e: ImageCroppedEvent) {
        this.cropedImagePreview= e.base64;
    }

    imgLoad() {
        // cropper tool is loaded
    }

    initCropper() {
        // initialize the cropper
    }
    
    imgFailed() {
        // error msg handler
    }
}

The ImageCroppedEvent API is available to track the event triggered whenever there is a change in Image Preview. The onFileChange event is triggered when an image is selected/ changed by the user. Likewise, we have other events available which are bonded to the <image-cropper> directive component.

Next, we will update the HTML template file. There will be an Input control of type=”file” and <img> tag to show the image preview using the cropImgPreview property carrying the Base64 image url.

Open the app.component.html file and update with the below code:

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

  <h3 class="mb-5">Angular Image Crop Example</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>

Serve Angular Application

Finally, we can test the Image Cropper implementation by executing the ng serve command to serve the application in the browser window.

ng serve --open

Adding the --open flag will open the application in the browser automatically, or else you can visit the below URL

http://localhost:4200

Conclusion

In this tutorial, we discussed how to implement the Image Cropper component with the help of the ngx-image-cropper package module. Using this component, we get various helpful user-friendly features like Crop, Zoom, Preview, and Scale the image and same the converted Base64 converted URL to the server.