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

Crop

File

 

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 home.page.html 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 home.page.ts 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.

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

5
Leave a Reply

avatar
5 Comment threads
0 Thread replies
4 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
GaneshRuanFürederAbdullah Althu thuat lap trinh Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
thu thuat lap trinh
Guest

verry good

Abdullah Al
Guest
Abdullah Al

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

Füreder
Guest
Füreder

It crashes if I set maximumcount to more than 1

Ruan
Guest
Ruan

This article is out of date, and that Plugin is no Longer maintained.
Don’t use this Tutorial
https://github.com/wymsee/cordova-imagePicker/issues/267

Ionic Sucks

Ganesh
Guest
Ganesh

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