How to Add a Camera to The Ionic App for Capturing Images

In this blog, we will discuss How to add a camera to the ionic app for capturing images and how its quality can decrease when you Upload? So, let's start.

At first, we have to install the camera Cordova plugin and native camera add to in our project.

Step1:

ionic Cordova plugin add cordova-plugin-camera

npm install @ionic-native/camera

At first, install two cmd on your project. Then add a camera, and when you are adding two cmd. Then you see in package.json some new code is added and node modules updated.

Step2:

import {Camera} from '@ionic-native/camera/ngx';

Please import the following section of code and add it to app.module.ts file and the provider section add the camera as the provider.

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule,
IonicModule.forRoot(),
IonicStorageModule.forRoot(),
AppRoutingModule,
HttpClientModule],
providers: [Geolocation,Camera,SplashScreen,StatusBar,Network,AppVersion,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent],
})
export class AppModule {}

Now come to the main part of how we capture images and how we decreased the quality of images by the following code.

In your project, any page .html file add the following HTML content.

takePhotoReturnImage() {
this.returnImage=null;
this.returnimageExt='';
const options : CameraOptions = {
quality: 30, // picture quality .. If you want to quality decrease then 30 value need to chaange or less from 30.
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options) .then((imageData) => {
var base64Image = "data:image/jpeg;base64," + imageData;
this.returnImage = base64Image;
this.returnimageExt='jpeg';
//console.log(base64Image);
}, (err) => {
console.log(err);
});
}

In your ts file add this code for capturing images and quality parameter set as the quality of image which you upload. If you want to highest quality then it increased to 100 and less value decrease of image quality.

Conclusion:

The above code is tested by me and you can check your code with the above steps. So, hope you have liked the blog. Please share your views in the comment section. See you on my next blog.