Introduction

Almost every app needs some degree of image handling. The typical use case may be a profile page where users are able to upload a profile picture. In this ionic tutorial we will cover the three most common features needed when working with images within an app. You will learn how to access the phone's Image Gallery to select pictures, how to open the phone's camera and take a new picture, and also how to crop the images from the app.

To access the phone's native functionalities in an Ionic app, we need to use Cordova Plugins. In this tutorial we will use three plugins: Camera, Crop and Image Picker


Check what we are going to build:


Step 1: Set up

In this section we will show you how to install all the required plugins for this tutorial.

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,
		...
	]
})

Step 2: Access the phone's Image Gallery and Crop Multiple Images

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 can select. As you can see in the screenshot below we set the maximunImageCount to 5.


Below you can see the code executed when user clicks the Choose Pictures button. Please pay special attention to reduceImages() reducer because it will allow you to crop multiple images one by one.


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) });
  }

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 show 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>

Step 3: Take a picture and Crop it

We learned how to select pictures from the phone's gallery, but we also can take a new one and show it at the screen immediately.



Access 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 the picture, once the user is done, you can access the pictures and do what you want. In this tutorial we will allow the user to crop them.

The Camera plugin has lots of options which 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);
	});
}

Next Steps

Now that you’ve learned more about working with images inside an ionic app, why don’t you give a chance to these Ionic Tutorials?

As you know we also sell beautiful mobile templates and components that you may find super useful as they save you hours of development, time and effort, while giving your projects a great design from scratch.

Save weeks of development and design time by using any of our Ionic Templates!