Hello Devs,

In this tutorial, we are going to see example of angular 10 image upload with crop using cropper.

This article will give you simple example of angular 10 crop image before upload.

Follow this step by step guide given below:




Create New App

ng new ngImageCrop



Install Npm Packages

npm install ngx-image-cropper --save



Import ImageCropperModule

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



Update 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 */

    }

}



Update HTML File

<div class="container">

    <div class="card">

      <div class="card-header">

          Angular Crop Image Tutorial Example -Rathorji.in

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


Run this command:

ng serve


I hope this example helps you.