How to crop image in Ionic 2 | Ionic 3 | Ionic 4

Image Cropping : Hello friends! In this post, we will learn how to crop the image in ionic. This is very simple to implement. You just need to have knowledge about Camera and Crop plugin.


For this, we need 2 plugins (Camera and Crop)

Install Camera plugin :
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera

Now, Install Crop plugin:
$ ionic cordova plugin add cordova-plugin-crop
$ npm install --save @ionic-native/crop


Now, Please use below code in your TS file to crop image -

import { Crop } from '@ionic-native/crop';
import { Camera, CameraOptions } from '@ionic-native/camera';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [Camera, Crop]
})

export class HomePage {

public base64Image:any;

constructor(private camera: Camera, private crop: Crop) {

  }


   selectImageFromCamera()
 {
   const options: CameraOptions = {
     quality: 100,
     targetWidth: 1000,
     targetHeight: 1000,
     destinationType: this.camera.DestinationType.FILE_URI,
     encodingType: this.camera.EncodingType.JPEG,
     mediaType: this.camera.MediaType.PICTURE
   }
   
   this.camera.getPicture(options).then((imageData) => {
    // imageData is either a base64 encoded string or a file URI
    // If it's base64:
    //this.base64Image = 'data:image/jpeg;base64,' + imageData;
    this.base64Image = imageData;

    this.crop.crop(this.base64Image, {quality: 100})
    .then(
      newImage => {
       this.base64Image=newImage;
        console.log('new image path is: ' + newImage);
 
       },
      error => {
        console.error('Error cropping image', error);

      }
    );

   }, (err) => {
    // Handle error
   });


 }

}


Now, Read below points for step by step explanation of the above code :

First, you need to import "Crop and Camera, CameraOptions" by using the below code :

import { Crop } from '@ionic-native/crop';
import { Camera, CameraOptions } from '@ionic-native/camera';


Add this to the constructor by using below code :

constructor(private camera: Camera, private crop: Crop) {

}


Now you need to call selectImageFromCamera() function when you want to trigger crop event with the help of the camera. In this function first, we are capturing image from the camera -

const options: CameraOptions = {
quality: 100,
targetWidth: 1000,
targetHeight: 1000,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}

this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
//this.base64Image = 'data:image/jpeg;base64,' + imageData;
this.base64Image = imageData;

}, (err) => {
// Handle error
});


Now after capturing image from camera we will crop this image by using below code :

this.crop.crop(this.base64Image, {quality: 100})
.then(
newImage => {
this.base64Image=newImage;
console.log('new image path is: ' + newImage);

},
error => {
console.error('Error cropping image', error);

}
);


This is the process to crop the image in ionic.