Angular 12 Image Crop, Preview, Zoom, Scale After Upload Tutorial

Today in this Angular 12 Image Crop tutorial, we will demonstrate the profound technique that helps you understand how to crop, scale, zoom the image during upload, and eloquently show the image preview in angular.

To integrate image zooming, cropping, scaling in angular, we will use the ngx-image-cropper package. The ngx-image-cropper plugins is a way more handy package than we thought; thanks to its creator, it comes with tons of methods and API, making angular crop image topic facile.

Image uploading is a primary functionality; as the proliferation of features magnifies, more subtle features are added to make the app better so, as we select the image from the system, the cropped part of the image transform into the base64 string, we may use it to store the image into the database and also use it to show image preview in angular.

Angular 12 Image Upload, Crop, Zoom, Scale and Preview Example

  • Step 1: Download Angular App
  • Step 2: Install ngx-image-cropper Package
  • Step 3: Import ImageCropperModule in AppModule
  • Step 4: Use Image Cropper in HTML
  • Step 5: Define Image Cropper Methods
  • Step 6: View Angular Application

Download Angular App

To begin angular app development, you need to install the latest version of Angular CLI.

npm install -g @angular/cli

Next, open console again, type the given command to download a new angular app.

ng new ng-demo-app

This instruction is completely optional; if you don’t want to style the component with custom CSS, then run the command to install Bootstrap in angular.

npm install bootstrap

Add the Bootstrap CSS node_module path in angular.json, right inside the styles tag, just below the style.scss definition:

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

Install ngx-image-cropper Package

Use the provided npm command with ‘i == install’ attribute to add the ngx-image-cropper package in the angular app.

npm i ngx-image-cropper

Import ImageCropperModule in AppModule

In this section, you will have to go to src/app.module.ts and import ImageCropperModule from the ‘ngx-image-cropper’ package; now you are ready to crop the image with preview in angular.

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

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

// import image crop module
import { ImageCropperModule } from 'ngx-image-cropper';


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

export class AppModule { }

Use Image Cropper in HTML

Use the image-cropper directive to set the angular image crop module in the HTML template; there are plenty of methods and properties offered by the image cropper.

From the given an example, you can see how gracefully we may implement the image preview and crop in angular using image cropper api.

Update code app.component.html file:

<div class="container mt-5">

  <h2 class="mb-4">Angular 12 Image Crop, Zoom, Scale Example</h2>

  <div class="col-md-12">
    <input type="file" (change)="onImgChange($event)" />
  </div>

  <div class="col-md-12">
    <image-cropper 
      [imageChangedEvent]="fileEvent" 
      [maintainAspectRatio]="true" 
      [aspectRatio]="4 / 4"
      [resizeToWidth]="256" 
      format="png" 
      (imageLoaded)="showCropper()"
      (cropperReady)="invokeCropper()"       
      (imageCropped)="imageCrop($event)" 
      (loadImageFailed)="error()">
    </image-cropper>
  </div>

  <div class="col-md-12">
    <p><strong>Cropped Image Preview</strong></p>
    <img [src]="preview" />
  </div>

</div>

Define Image Cropper Methods in .ts

Next, get into the app.component.ts, define custom methods to crop the image. In the subsequent section, you will see how to run angular project and view the feature in the browser.

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

// image crop service
import { ImageCroppedEvent } from 'ngx-image-cropper';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

    fileEvent: any = '';
    preview: any = '';

    onImgChange(event: any): void {
        this.fileEvent = event;
    }
    
    imageCrop(event: ImageCroppedEvent) {
        this.preview = event.base64;
    }

    showCropper() { }

    invokeCropper() { }
    
    error() { }
}

View Angular Application

Find out how angular image crop feature works in the browser, type command in the terminal, and hit enter to execute the command.

ng serve --open

Angular Image Crop, Preview After Upload Tutorial

Conclusion

All the good things come to an end; similarly, this guide has been completed. We believe you must have assimilated the process and eloquently understood how to crop the image after upload in angular using the image-cropper package. To crop the image and show image preview, we used the base64 code; moreover, we learned how to use image-cropper API to build the feature.