enappd loader


How to add Image Cropper in ionic 4 app


This is Part-2 of two post series. In this post, you will learn how to implement an Image Cropper in Ionic 4 apps 🔥. Part 1 of the series discusses how to use Image picker in IONIC 4 app.

We will create a sample app, where users can pick an image from either camera or gallery, After picking, user can see crop their image as well

Complete source code of this tutorial is available in the ionic-4-image-cropper-and-picker

I have explained how to add Image Picker in Part 1 of this story you can check it here. In this post, we will start from the previous blog

What is Ionic 4?

You probably already know about Ionic, but put this section in every blog just for the sake of beginners. Ionic is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.

In other words — If you create native apps in Android, you code in Java. If you create native apps in iOS, you code in Obj-C or Swift. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS. I’m a huge fan of Ionic and been developing Ionic apps for last 4 years.

Structure

We’ll follow a stepped approach to creating an Image Cropper app in Ionic 4. We’ll use an IONIC native plugin for Image Cropping. Following are the steps

  • Step 1— Setup Image Crop plugin
  • Step 2— Use Image Picker Plugin In App

So let’s dive right in!

Step 1 — Setup Image Crop plugin

Installation

‌For that, open your terminal and type

ionic cordova plugin add cordova-plugin-crop

It’s a bit clumsy to work with Cordova plugin so the ionic team created Ionic Native, which is a wrapper for the Cordova plugins so we can use them in a more “Angular/Ionic” way.

‌So now we will open our terminal and try this command‌ to install Facebook package from Ionic Native

npm install @ionic-native/camera

Step 2 — Use Image Picker Plugin In App

Using this plugin The first step you will need to do is add this plugin to your app’s module

Import these plugins like this

import { Crop } from '@ionic-native/crop/ngx';

and add this to providers of your app Like this

providers: [
StatusBar,
SplashScreen,
Crop,
Camera,
File,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],

So after Adding Your app.module.ts look like this


Now time to import this plugin in your home.ts where we will use this plugin

So for using this plugin in our home.ts first, we will import the plugin like this

import { Crop } from '@ionic-native/crop/ngx';

and inject it in your Constructor (Dependency injection) like this

constructor(
private camera: Camera,
private crop: Crop,
public actionSheetController: ActionSheetController,
private file: File
) { }

And use this code for Adding Image Cropper in IONIC App

cropImage(fileUrl) {
this.crop.crop(fileUrl, { quality: 50 })
.then(
newPath => {
this.showCroppedImage(newPath.split('?')[0])
},
error => {
alert('Error cropping image' + error);
}
);
}

So after Adding this code your home.ts something looks like this.








Conclusion

In this post, you learned how to implement Image Cropper in your Ionic 4 app.

Complete source code of this tutorial is available in the ionic-4-image-picker-cropper

Next Steps

Now that you have learnt how to implement Twitter login in Ionic 4 apps, there are several things you can do next

Need FREE Ionic 4 Starters ?

You can also find free Ionic 4 starters on our website enappd.com

You can also make your next awesome app using Ionic 4 Full App



Make your next awesome app with Ionic 4 Full App



Title
Subtitle
Kicker