When you are working with images inside your Ionic app and allow users to capture images, chances are high you might want to offer some sort of image modification or cropping to bring the images in perfect shape.

The good news is, that you can easily add different crop operations to your app using CropperJS and especially the Angular wrapper for the crop library.

Inside this Quick Win we will build an Ionic image cropping app that allows to capture an image and perform all kinds of modifications until you can export the image to a base64 string that you could use to upload the final image like you can see below!

Starting our Ionic Image Crop App

We start with a basic blank Ionic app and install the cropping library plus the Camera plugin to capture new images inside our app:

Now make sure to import everything into your app/app.module.ts like this:

Note: If you develop your app for iOS you need to include the right permissions for the camera or photo library, and the easiest way to automatically add them is by adding these lines to your config.xml:

Now the iOS project will be build with the additional entries to the plist and Apple won’t complain. Of course make sure to add useful information why you are using the plugins instead of the standard string!

Adding CropperJS Image cropping Functions

Now we get to the meat of this article, which is using the cropping functions. But actually, it’s so simple that most of the functions don’t really need explanations.

To keep a reference to the cropping area we use a viewchild and also specify some options for the cropping tool that will allow us to perform different modifications on the image.

The capturing process is the standard code for opening the camera and using the result as a base64 image string that will be assigned to our crop component inside the view.

All of the functions can then be called on the this.angularCropper.cropper which is the cropper reference of our component. Finally, you can also export the cropped and edited image again as a base64 string that we will simply display, but you could use this result to send it to your server of course!

Go ahead and change your pages/home/home.ts to:

Those are most of the functions, but you can also find all the functions inside the documentation for CropperJS.

Now we just need the appropriate view, and therefore we will use some buttons in the navigation bar for the general operation plus two rows below our cropping area for the additional operations.

The most interesting piece is the angular-cropper but here we don’t need much more than the predefined options from our class and also the actual image (that we are setting after the camera returns).

Below everything we can also display the result once we exported the crop image as a base64 string, so go ahead and apply these changes to your pages/home/home.html:

Now your users are ready to edit their images perfectly with all kinds of operations!

It’s actually super easy to add this functionality to your app, but allowing the editing can make a huge difference in how your users can capture and add the images just like they want it.

You can also find a video version of this Quick Win below.