Image Uploading/Previewing/Cropping/Zooming Tutorial Angular 12

We will learn in this tutorial to upload an Angular image, show an image preview by creating a Base64 url in Angular, crop an image, zoom and scale the image in Angular.

Angular 12- How to Crop and Upload Image Tutorial

It’s quite an easy task to upload, preview, crop, scale and zoom an image in Angular. We can simply use the ngx-image-cropper plugin to create this amazing feature.

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

By simply following the given steps, you can upload, crop and zoom the image in Angular 12 app:

• Step 1 is to Create a New Angular App
• Step 2 is to Install Bootstrap Library
• Step 3 is to Add Code on App.Module.ts File
• Step 4 is to Add Code on View File
• Step 5 is to Add Code On app.Component ts File
• Step 6 is to Start the Angular App

Step 1 – Creating a New Angular App

The very first step is to open the terminal and execute the following command on it to install an Angular app:

ng new my-new-app

Step 2 – Installing the Bootstrap Library

The second step is to simply install the Bootstrap Library for implementing the image cropping and uploading in the Angular app. Then, you can install the packages by executing the following commands on the terminal:

npm install bootstrap

Include bootstrap css into angular.json file:

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

After you have created a new angular app and entered into the project further, you have to install. Thereafter, add the image cropper plugin into the angular app:

npm install ngx-image-cropper

Step 3 – Adding Code on App.Module.ts File

Afterwards, you have to visit src/app directory and open app.module.ts file.

Then, add the following lines of into 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 { }

Step 4 – Adding the Code on View File

Further step is to create the image upload form in Angular 12 app. So, visit src/app/ and app.component.html and update the following code into it:

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

Step 5 – Add Code On app.Component ts File

Then, you have to visit the src/app directory and open app.component.ts. After this, add the following code into 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 {
 
    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
    }
}

Step 6 – Starting the Angular App

Lastly, execute the following command on the terminal to start Angular fullcalendar npm app:

ng serve

Conclusion: So, I hope that you have well understood how to crop, preview, zoom and scale the required image before uploading it at the server since we have learnt how to add an image cropper package in an Angular app.