Angular 12 Crop Image Preview Before Upload using ngx-image-cropper

In this article, we will discuss the angular 10 crop image afore upload. This post will give you a simple example of an angular 11/10 cropper example. you'll learn image upload with crop in angular 10. This article goes into detail on angular 10 image upload with crop utilizing cropper.

If you require to utilize image upload with a crop then you can facilely use the ngx-image-cropper npm package. it will provide you Cropping, Zooming, Scaling, and Preview functionality while uploading time. it's very facilely used with your angular 10 application.

In this example, i will give you step by step explication of how you can image upload in a crop in angular 10 application. you can withal optically discern bellow screenshot for demo.

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new ngImageCrop

Step 2: Install npm Packages

In this step, we will install the ngx-image-cropper npm package for uploading the image crop function in angular. so let's run both commands:

npm install ngx-image-cropper --save

Step 3: Import ImageCropperModule

Now, here we will import ImageCropperModule from ngx-image-cropper and then we add on declarations part. so let's update the app.module.ts file as like bellow:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
  
import { ImageCropperModule } from 'ngx-image-cropper';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ImageCropperModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Update Component ts File

Here, we will update app.component.ts file here, in this file we will write fileChangeEvent(), imageCropped(), imageLoaded(), cropperReady() and loadImageFailed() that provided by ngx-image-cropper.

You can update as bellow app.component.ts file.

src/app/app.component.ts

import { Component } from '@angular/core';
import { ImageCroppedEvent } from 'ngx-image-cropper';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ngImageCrop';
  
  imageChangedEvent: any = '';
    croppedImage: any = '';
  
    fileChangeEvent(event: any): void {
        this.imageChangedEvent = event;
    }
    imageCropped(event: ImageCroppedEvent) {
        this.croppedImage = event.base64;
    }
    imageLoaded() {
        /* show cropper */
    }
    cropperReady() {
        /* cropper ready */
    }
    loadImageFailed() {
        /* show message */
    }
}

Step 5: Update HTML File

I used bootstrap class on this form.

Here, we will update the HTML file as like below, so update it as like bellow:

src/app/app.component.html

<div class="container">
    <div class="card">
      <div class="card-header">
          Anguler 11 Crop Image Example - HackTheStuff
      </div>
      <div class="card-body">
        <input type="file" (change)="fileChangeEvent($event)" />
        <div class="row" style="margin-top: 15px;">
            <div class="text-center col-md-8">
                <h5>Crop Image</h5>
                <image-cropper 
                [imageChangedEvent]="imageChangedEvent" 
                [maintainAspectRatio]="true" 
                [aspectRatio]="4 / 4"
                [resizeToWidth]="256" 
                format="png" 
                (imageCropped)="imageCropped($event)" 
                (imageLoaded)="imageLoaded()"
                (cropperReady)="cropperReady()" 
                (loadImageFailed)="loadImageFailed()"></image-cropper>
            </div>
            <div class="text-center col-md-4">
                <h5>Preview</h5>
                <img [src]="croppedImage" />
            </div>
        </div>
      </div>
    </div>
</div>

i hope you like this article.

Author : Harsukh Makwana