Image Crop, Preview, And Upload In Angular

Introduction

In this article, we are going to see image crop and upload, image preview by creating a Base64 URL in Angular. 

First, we are going to create an angular CLI project using the commands below. 

ng new image-crop-app 

Once you create a new angular application and enter it into the project, you have to install and add the image cropper plugin into the angular app. Install bootstrap library for implementing image crop and uploading in angular app. So, you can install the packages by executing the following commands on the terminal. 

npm install bootstrap 
npm install ngx-image-cropper 

After installing bootstrap CSS files included in the angular.json file. Like the below codes.

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

Next going to add the app.module.ts file. Please copy and paste the code below into the module 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 { } 

In this step, go to open app.component.ts. Then add the following code into the 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 
    } 
} 

Then next, create an image upload form in the angular app. So, app.component.html and update the following codes. 

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

Added the all above codes and run the applications using ng serve --open OR npm start. 

After running the applications. I have uploaded one angular image and after upload, the image is shown in the preview. Please check the image below. 

If we need to crop these images please select where you want to crop the image size and adjust the icon. and you can crop the image like this. 

Finally, we uploaded images, preview, and crop changes. I hope this article is most helpful for you.