Image Cropping and Transformation with Ionic Angular

If you want to transform images that users upload in your app, you can do a lot of cropping and transforming with a super simple package!

In this Quick Win we will use the ngx-image-cropper library to create a simple image transformation app with Ionic Angular to apply some basic changes to a user captured image.


To make things more fun we will use Capacitor to capture the actual images in our app and use them as the input for our cropper component.

The full quick win with snippets is only available to Ionic Academy members.
Join now for

  • Unlimited access to all quick wins
  • Library of 40+ step-by-step video courses
  • Support for Ionic questions via Slack & private community

Join now & Unlock

Current member? LOGIN

Starting the Image Crop App

Let’s start with a blank new app and install our cropper package. To use pinch events we also need to install hammerjs – you don’t have to install this if you only want to use the app on the browser though.

We also already installed the Capacitor camera package, and to use it inside a mobile app we need to ask the user for permissions.

Therefore go ahead and open the ios/App/App/Info.plist after adding the native platforms and add the following keys:

We now need to do the same for Android, so bring up the android/app/src/main/AndroidManifest.xml and add towards the bottom:

Now we are basically finished, but in order to include the HammerJS package we need to add the following line to our src/main.ts:

At least this was required at the time writing this tutorial – probably it works with a different solution (or no HammerJS) in the future.

Adding Image Crop Functionality

When you want to include the Cropper component, you first need to import the module so in our case let’s open the src/app/home/home.module.ts and load it like this:

You could now also already use the example from the documentation to quickly see in in action.

However, we will take a slightly different path as we will use the camera to capture an image and then use the resulting base64 string as the input for the cropper component.

For this get started with some basic setup in our src/app/home/

We will keep the capture image data in myImage, and once we crop the image we will write it to croppedImage.

Additionally we can access the cropper component as a viewchild, and on that we can call the different functions and set the inputs of our cropper instance.

Let’s implement some of the possible functions right now and add them to our src/app/home/ as well:

Most of this is pretty basic stuff, the only real interesting observation is the transform object that we update: We will pass this object to our cropper component, and by updating it in our functions we can easily transform the image!

Next step is to add a button to capture an image or discard the process (which simply means to set the input source to null), and we can now also add the image-cropper component to our template.

Go ahead with the following and change the src/app/home/ to:

Ok quite some options on our component – let’s talk about them:

  • The imageBase64 is the input source in our case, but you could also use a blob, url or FileEvent
  • We don’t want to show the resize squares on a mobile device so we use hideResizeSquares
  • The transform takes the values we define to easily transform the image
  • By setting autoCrop to false we can manually control when to crop the image
  • Additionally we catch some outputs to update our view or assign the resulting cropped image

Additionally we now also need a few buttons to trigger our functions, so go ahead and add the following row with buttons above the cropper component:

For reference let’s also overwrite the two existing CSS variables which you can use to style the overlay and background. For this bring up your src/app/home/ and insert:

Now we have a slightly darker overlay, and the background of the cropper component takes the same color as our background. We could also only render the component when we have an input image, but knowing about your options is always a good idea!


It’s actually super easy to build an Ionic Angular image crop based on real images captured with Capacitor. If you check out the documentation you will see a different way of using a file input, and you can use simply your preferred way to define the input for the cropper element.

After this, the rest is all the same and you can dive more into aspect ratios or transformations to get the most out of this package.

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