This application will allow us to load an image from the device photolibrary, crop a selected area of the picture courtesy of a user friendly cropping tool and then retrieve the output for subsequent usage.

Getting started

In a suitable location on your computer create the following ionic project (assumes you are running the latest version of Ionic along with the necessary software for application development I.e. Node, Android Studio, Xcode etc):

ionic start ionic-artist blank

Once successfully generated change into the root directory of this new project:

With these in place let's start getting stuck into some coding - beginning with our recently generated PhotoProvider service.

Camera

The ionic-artist/src/providers/photo/photo.ts service implements a single method - selectImage - for handling the opening of the device photolibrary, selection of the desired image and returning that as a base64 encoded string.

This is all made possible thanks to the incredibly helpful Apache Cordova Camera plugin which performs all the necessary background 'heavy lifting' for the selectImage method.

With this in place we can now move onto coding the logic for the HomePage component which will allow us to select and edit an image of our choosing.

Home

Within the ionic-artist/src/pages/home/home.ts file we'll be accomplishing the following tasks:

Opening the device photolibrary

Selecting the desired image

Initialising the image cropping tool

Handling the cropping of the image

Retrieving the source data of the cropped image

We WON'T be doing anything fancy with the cropped image (such as saving that locally, converting to a Blob file or pushing to a remote storage solution such as Firebase Storage - those I'll leave to you to figure out....if you go through previous tutorials on this website you'll find resources to help you achieve these anyway ;) ).

I will show you how to access and retrieve the source data of the cropped image though so you can make decisions about how to subsequently use that.

The code for the ionic-artist/src/pages/home/home.ts file is displayed below and shouldn't require any further elaboration on my part as this is commented in full at each key stage of the class:

With the application codebase in place we can now attach a mobile/tablet device to our computer then build and run the application with the following commands (substitute android for ios if you are using that platform):

ionic cordova build ios --prod
ionic cordova run ios

All of which, if the build/run processes have been successfully executed, should launch the application on our device and allows us to start selecting and editing images like so:

If you're seeing the above (your device photolibrary images SHOULD be different from mine!) then congratulations you can successfully crop and save your selected images.

In summary

This is, of course, a very basic demonstration of how the tool could be used and there's a lot of areas into which we could extend this functionality such as saving the cropped image to a remote service (I.e. Firebase Storage) or subsequently adding post-editing features such as the ability to rotate/scale or manipulate pixel data within the cropped image.

These I will leave to you, should you wish to experiment further with the above possibilities.

Hopefully you've found the above tutorial useful and, if so, please feel free to share your comments, thoughts and suggestions in the comments area below.

I explore other areas of using the Ionic framework within my e-book featured below and if you're interested in learning more about my e-books please sign up to my FREE mailing list where you can receive updates on current/forthcoming e-books and blog articles.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

In the following tutorial I'm going to guide you through using Angular FormBuilder, FormGroup and FormArray modules to dynamically add and remove input fields in forms for your Ionic framework applications...

In the following tutorial we're going to explore how we can synchronise data between a PouchDB database running on an Ionic app and a remote CouchDB database which will be running on our desktop computer.

We'll use the application that we created in part 1 & part 2 of the PouchDB tutorial as a base to build on. If you haven't read that tutorial, and aren't familiar with the code that was used, I suggest you go there now before proceeding with this tutorial...

Let's face it, form validation is one of those tasks rarely enjoyed by developers - particularly with the volume of data checks and requirements that often entails - but thanks to Angular's FormBuilder class validating online forms just got a little easier...