Ionic 4 | Crop Images selected from Image Selector show in base64 format using Native plugins

In many applications, we usually face some situation where we need to get Cropped images from users during form submissions. Cropped images are usually small in size and have only that part of an image which is required. Image crop behavior should be easy to use and of course easy to implement 😛

Today we will implement Image Crop functionality in Ionic 4 Application using Angular 7 with the help of some Ionic Native and Cordova plugins.

In Ionic application, there will be an Image Picker from which a user can select a single image to crop. After Crop area selection, the cropped image will be displayed to the user with the image path converted to base64 dataUrl.

Also Read: Ionic 3 Share and Save Images from Application’s Assets Folder to Device.

To Achieve this functionality we are going to use three Native plugins:

Image Picker opens Gallary images for user selection. We can change options for Image selection limit and also set Height, Width, Quality of images picked.

Crop plugin takes an image path and opens an interactive selection where user can select crop are then hit Ok.

File plugin converts Cropped image’s temporary path to base64 encoded URL to show back cropped image to the user.

Let’s get started with implementation!

Create Ionic 4 Application

Make sure you have latest Ionic CLI version installed

Create a new Ionic 4 application with a blank template by running following command

Install Native & Cordova Plugins

Install required plugins by running following commands at the app’s root folder

Image Picker




Import Plugins in App’s Module

After installation open app.module.ts file, import plugins then add in providers array as shown below


Add Image Crop Functionality

Next, we will add Crop functionality in Home component which is created by default in a blank template.

In the file, we will a button to open image picker for image selection. There will be an <img> tag to show a cropped image to the user and a loader element.

In the file, we will add methods and explain its usage one by one in the application.

On button click pickImage() method is called, which use imagePicker service to call getPictures method. In imagePickerOptions we are passing ImagePicker options.

After image selection, the cropImage method will be called to pass a cropped image path to other method showCroppedImage.

Finally, we convert the cropped image path to base64 DataUrl by calling the readAsDataURL method of file service.


Leave a Reply

5 Comment threads
1 Thread replies
Most reacted comment
Hottest comment thread
6 Comment authors
Tejasvi ShindeGaneshRuanFürederAbdullah Al Recent comment authors
newest oldest most voted
Notify of
thu thuat lap trinh

verry good

Abdullah Al
Abdullah Al

Thank you for this clear post. I use it on ionic 4 and it works perfect.


It crashes if I set maximumcount to more than 1


This article is out of date, and that Plugin is no Longer maintained.
Don’t use this Tutorial

Ionic Sucks


It is okay for single image, how can we do this for multiple images?

Tejasvi Shinde
Tejasvi Shinde

I am also facing the same issue any solution did you get?