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âââCreate a Basic Ionic 4 App
- Step 2â Setup Image Crop plugin
- Step 3â Use Image Picker Plugin In App
- Step 4âââBuild the app in Android and test
So letâs jump right in!
Step 1âââCreate a basic Ionic 4Â app
I have covered this topic in detail in this blog.
In short, the steps you need to take here are
- Make sure you have node installed in the system (V10.15.3 at the time of this blog post)
- Install ionic cli using npm (my Ionic version is 4.1.0 currently)
- Create an Ionic app using
ionic start
You can create a blank
starter for the sake of this tutorial. On running ionic start ionic-4-image-cropper blank
 , node modules will be installed. Once the installation is done, run your app on browser using
$ ionic serve
The app will launch on browser. You can go to Inspect â Device Mode to see the code in a mobile layout. You can create a basic layout for implementing image cropping. All the real action will happen when we build the app for Android.
Next weâll add the Image Crop plugin to our app.
Step 2âââ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 3âââUse Image Crop
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);
}
);
}
After adding this code, your home.ts
looks something like this.
Step 4âââBuild your app on Android and test
If you have carried out the above steps correctly, Android build should be a breeze.
Run the following command to create Android platform
$ ionic cordova platform add android
Once platform is added, run the app on device (Make sure you have a device attached to the system).
$ ionic cordova run android
Once your app is up and running on the device, you can start testing all the functions. The screen shown here is taken from a real Android device đ
Conclusion
In this post, you learned how to implement Image Cropper in your Ionic 4 app and build it in android to perform image cropping.
Complete source code of this tutorial is available in the ionic-4-image-picker-cropper
Next Steps
Now that you have learned the implementation of Image Cropper in Ionic 4, you can also try
- Ionic 4 Payment GatewaysâââStripe | PayPal | Apple Pay | RazorPay
- Ionic 4 Charts withâââGoogle Charts | HighCharts | d3.js | Chart.js
- Ionic 4 Social LoginsâââFacebook | Google | Twitter
- Ionic 4 AuthenticationsâââVia Email | Anonymous
- Ionic 4 FeaturesâââGeolocation | QR Code reader | Pedometer
- Media in Ionic 4âââAudio | Video | Image Picker
- Ionic 4 EssentialsâââNative Storage | Translations | RTL
- Ionic 4 messagingâââFirebase Push | Reading SMS | Local notification
- Ionic 4 with FirebaseâââBasics | Hosting and DB | Cloud functions
If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App
Top comments (0)