Ionic Cordova plugin camera allows us to use a native camera to take a picture and allows us to choose images from the mobile device image library. With the release of ionic 4 and above, we can also use the Ionic capacitor camera plugin to achieve the same functionality as the ionic Cordova camera in Progressive Native Web, Mobile, and Desktop applications. The Cordova camera plugin uses the native camera for taking pictures or getting images from the image gallery.
In this article, we’ll learn how to used the Ionic Cordova camera plugin to trigger the camera picture and get an image from a gallery of the phone. Our image is in Base64 or URI format.
Ionic Cordova camera example screenshot
If you are building an application only for a mobile device, then we can use the Ionic Cordova plugin camera plugin otherwise is recommended to use the capacitor camera plugin. We’ll demonstrate how to use the Ionic Cordova camera in the Ionic 5 project. We have two buttons in our example, one to take the photo using the device camera and the other is to load an existing picture from the device image library.
Screenshot of ionic Cordova camera example
Setting and configuring the Ionic project for ionic Camera Cordova
If you have not yet installed an Ionic CLI on your system. Then we need to install an Ionic CLI first. Ionic CLI allows us to create an Ionic project, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. To install the Ionic CLI, open a terminal, and run the following command:
npm install -g @ionic/cli
With the release of ionic version 4, no longer limited to angular, we can create the ionic projects in different front-end frameworks like Angular, Vue, and React. In this example, we’re using an Ionic angular project. Let’s create an Ionic angular project.
ionic start cordovaCameraApp
Once we execute the above command, it will allow us to select a framework and template. We have to select the Angular framework. The ionic framework already had lots of pre-made built-in templates. In our case, we are using a blank template.
Installing Ionic Cordova plugin camera
We must have the Node and NPM installed on your device, to get started with the Ionic 5 Camera tutorial. Let’s install the Ionic Cordova camera.
ionic cordova plugin add cordova-plugin-camera
npm install @ionic-native/camera
Ionic Cordova plugin camera supported many platforms and these include.
- Android
- Browser
- iOS
- Windows
We need to add the code below inside of the <platform name='ios>
section for IOS platform.
<config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
<string>You can take photos</string>
</config-file>
Importing Ionic Cordova Camera Plugin in App Module
To use the Cordova camera in our ionic application, we need to import the Cordova camera class reference as a provider inside our app.module.ts file.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Camera } from '@ionic-native/camera/ngx';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
Camera
],
bootstrap: [AppComponent]
})
export class AppModule {}
What we will learn in the ionic Cordova plugin camera?
In this article on the Cordova camera plugin, we’re learning the following.
- Access the Cordova camera plugin to trigger the camera picture and get the image back in the Base64 or URI format.
- Parse the Base64 data or URI on an image tag DOM object.
- Display the URI if it’s in the URI format.
Adding and using the Ionic Cordova camera plugin in component
Now we had finished the camera configuration in our application and now let’s start working on the Ionic camera. Our blank ionic angular page has a home component. Let’s first create two buttons in our home component template.
- The button shows the camera for taking photos from the device camera
- Button show an Album for taking images from the device image gallery.
Once we have an image, we are displaying it in our template using the image variable. Edit home.page.html templates.
<ion-header [translucent]="true">
<ion-toolbar color="danger">
<ion-title>
Ionic 5 cordova camera
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<img [src]="image" *ngIf="image">
<ion-grid>
<ion-row class="ion-align-self-center">
<ion-col size="6">
<ion-button (click)="takePhoto(1)">Show Camera</ion-button>
</ion-col>
<ion-col size="6">
<ion-button (click)="takePhoto(0)">Show Album</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
We have an image tag with ngIf directive, whenever we have an image, we’re displaying it otherwise there is no image tag. In our takePhoto() method we have passed one argument, this argument indicates sourceType of the camera. Sourcetype 1 indicates taking an image from the camera and 0 indicates we want to use an image from our phone gallery. Using sourceType 0 or Zero will open a dialog popup instead of a camera and allow you to choose the image you want from the device.
Add the following code in home.page.ts, we have to import Camera and CameraOptions, class as a dependency in our home.page.ts file
import { Component } from '@angular/core';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
image: string;
constructor(private camera: Camera) { }
async takePhoto(sourceType) {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
sourceType
};
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
this.image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
console.error(err);
});
}
}
We can have an image in base64 string or image file URI, in-camera option by specifying DestinationType as DATA_URL allows us to take an image in base64 string. Cordova camera had a list of properties which is optional we can customize it to use it and here is the list of Ionic Cordova camera options we can use.
Name | Type | Default | Description |
---|---|---|---|
quality | number | 50 | The quality of the saved image is expressed as a range of 0-100, where 100 is typically full resolution with no loss from file compression. (Note that information about the camera’s resolution is unavailable.) |
destinationType | DestinationType | FILE_URI | Choose the format of the return value. |
sourceType | PictureSourceType | CAMERA | Set the source of the picture. |
allowEdit | Boolean | false | Allow simple editing of the image before selection. |
encodingType | EncodingType | JPEG | Choose the returned image file’s encoding. |
targetWidth | number | Width in pixels to scale image. Must be used with targetHeight . The aspect ratio remains constant. | |
targetHeight | number | Height in pixels to scale image. Must be used with targetWidth . The aspect ratio remains constant. | |
mediaType | MediaType | PICTURE | Set the type of media to select from. Only works when PictureSourceType is PHOTOLIBRARY or SAVEDPHOTOALBUM . |
correctOrientation | Boolean | Rotate the image to correct the orientation of the device during capture. | |
saveToPhotoAlbum | Boolean | Save the image to the photo album on the device after capture. | |
popoverOptions | CameraPopoverOptions | iOS-only options that specify popover location in iPad. | |
cameraDirection | Direction | BACK | Choose the camera to use (front- or back-facing). |
Adding Platform in our ionic camera project
Once we have completed our project, we need to test it on our real device. For that, we need to dd the target platform and in our case, we have tested in android 9. We can add the target platform by running the following commands based on your platform. Running the ionic Cordova camera application on a mobile device, for android follow these steps.
ionic cordova build android
ionic cordova run android
ionic cordova run android
Conclusion
In this article, we have explored details on how to use the Ionic Cordova camera in ionic angular applications. We used to take pictures from the camera or image gallery of the phone. I hope that this article was able to get you up and running with the Ionic Cordova camera.
Related Articles
- Ionic Capacitor camera example
- How to implement Ionic Barcode Scanner using Cordova?
- How to implement an Ionic QR code Scanner and generator?
- Complete guide on Ionic firebase image upload from camera or gallery