Today, there are many use cases where our users might need to access their device's camera or image gallery. This can be either to select an existing image or to take a new image or video to use within our application.
Almost every app needs some degree of image handling. The typical use case may be a profile page where users are able to upload their profile picture.
In this Ionic tutorial we will cover three of the most common features needed when working with images within an Ionic App:
- Access the phone's image gallery to select pictures
- Open the device's camera and take a new photo
- Crop an image
To access the phone's native functionalities in an Ionic app we can either use Cordova or Capacitor plugins. In this tutorial we will use three Cordova plugins: Camera, Crop and Image Picker.
By clicking the GET THE CODE button from above, you'll be able to download the following example app developed for this tutorial.
In this section we will show you how to install all the required plugins.
For the image picker functionality we need:
- $ ionic cordova plugin add cordova-plugin-image-picker
- $ ionic cordova plugin add cordova-plugin-telerik-imagepicker
- $ npm install --save @ionic-native/image-picker
In order to crop the images, we need:
- $ ionic cordova plugin add cordova-plugin-crop
- $ npm install --save @ionic-native/crop
In order to access the camera and take a picture, we need:
- $ ionic cordova plugin add cordova-plugin-camera
- $ npm install --save @ionic-native/camera
Now we have to import and add all the Ionic Native plugins as providers in our app.module.ts:
import { ImagePicker } from '@ionic-native/image-picker';
import { Crop } from '@ionic-native/crop';
import { Camera } from '@ionic-native/camera';
import { NgModule } from '@angular/core';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
ImagePicker,
Crop,
Camera,
...
]
})Now that we installed all the required plugins, we can focus on the implementation. In this section we will show you how to manage a list of selected images and control the maximunImageCount parameter, so you can limit the amount of images the user is allowed to select. For this example, we set the maximunImageCount to 5.
After the user selects their images, their will have the possibility to crop each of them.
Below you can see the code executed when the user clicks the Select Pictures button.
openImagePicker() {
let options= {
maximumImagesCount: 5,
}
this.photos = new Array<string>();
this.imagePicker.getPictures(options)
.then((results) => {
this.reduceImages(results).then(() => {
console.log('all images cropped!!');
});
}, (err) => { console.log(err) });
}
// allow the user to crop each of their selected images
reduceImages(selected_pictures: any) : any {
return selected_pictures.reduce((promise:any, item:any) => {
return promise.then((result) => {
return this.cropService.crop(item, {quality: 75})
.then(cropped_image => this.photos.push(cropped_image));
});
}, Promise.resolve());
}Finally we have a very simple .html file to display the selected pictures:
<ion-header>
<ion-toolbar color="primary">
<ion-title>
Images
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-card *ngFor="let photo of photos">
<img src="{{photo}}" />
</ion-card>
</ion-content>On the previous section, we learned how to select pictures from the phone's gallery, but we can also allow the user to take a new picture and show it at the screen immediately.
Accessing the phone's camera is very easy if we use the Camera plugin. You just need to call this.camera.getPicture(options) and the phone will display the Camera to the user so he can take a picture. Once the user is done, you can access the new pictures from the Ionic app and do the processing your need. In this ionic tutorial we will allow users to crop their new images.
The Camera plugin has lots of options that you can check here. For example you can choose the type of the image (png, jpeg), or if you want to allow the user to take videos also.
takePicture() {
let options =
{
quality: 100,
correctOrientation: true
};
this.camera.getPicture(options)
.then((data) => {
this.photos = new Array<string>();
this.cropService
.crop(data, {quality: 75})
.then((newImage) => {
this.photos.push(newImage);
}, error => console.error("Error cropping image", error));
}, function(error) {
console.log(error);
});
}Well done! In this Ionic image processing tutorial you learned how to add image-related use cases to your Ionic app, such as taking new photos, accessing existing images from the device gallery, and cropping images.
Image handling is just a tiny step in building a complete mobile app with Ionic. In our blog you can find lots of other tutorials that will guide you in the process of creating your Ionic App.
Did you know that we recently released Ionic 6 Full Starter App? It's an ionic 5 template that you can use to jump start your Ionic app development and save yourself hundreds of hours of design and development.
It is also a PWA and has more than 100 Ionic screens and components.Try it on your phone to see how it works!
These are some of my favourite Ionic tutorials. All of them include a free Ionic starter that you can reuse for your own project.
Liked this Ionic Tutorial?
Leave your comments below.