Angular 10 Image Upload with Crop using Cropper

If you need to see example of angular 10 image upload with crop using cropper. you will learn angular 10 crop zoom scale. We will use preview and upload example. This article will give you simple example of angular 10 crop image before upload.

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

In this example, i will give you step by step explanation how you can image upload in crop in angular 10 application. you can also see bellow screenshot for demo.

Preview:

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 ngx-image-cropper npm package for upload image crop function in angular. so let's run both command:

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 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. if you want to add than then follow this link too: Install Boorstrap 4 to Angular 10.

Here, we will update html file as like bellow, so update it as like bellow:

src/app/app.component.html

<div class="container">
    <div class="card">
      <div class="card-header">
          Angular Crop Image Tutorial Example - HDTuto.com
      </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>

Now you can run angular 10 app:

Run Angular App:

ng serve

I hope it can help you...