How to use camera in an ionic application

Posted By Ankit Singh Rana | 03-Sep-2017

To use camera in a ionic app we would need cordova plugin and ng-cordova Library. The cordova camera plugin makes it very easy to take photo from the device. And it can a base64-encoded image or a file location on the device. In this blog, I will show you how to get file URI of an Image from the device.

Steps : 1

First run the following command to add the plugin, and also inject 'ngCordova' in your app.js and include ng-cordova.js file in your index.html

        cordova plugin add cordova-plugin-camera
       

Step : 2

Now have to inject $cordovaCamera in a service or a controller. After that define the camera option like picture quality camera orientation etc. Now to get an image URI we have to set destinationType to "Camera.DestinationType.FILE_URI". You can also set it to base_64.

           var options = {
                        quality: 100, // High quality Image
                        destinationType: Camera.DestinationType.FILE_URI, //Base_64 or File URI, currently getting file URI 
                        sourceType: Camera.PictureSourceType.CAMERA, //Source is camera
                        allowEdit: true, // Allow user to edit before saving
                        encodingType: Camera.EncodingType.JPEG, // Save as JPEG
                        targetWidth: 100,
                        targetHeight: 100,
                        popoverOptions: CameraPopoverOptions,
                        saveToPhotoAlbum: false, // Album save opton
                        correctOrientation: true // Camera orientation
                    };                
      

Step 3 :

Taking the picture and getting the URI is pretty straight forward, we'll just have to call getPicture function on the $cordovaCamera with the options defined above and it will return an Image URI.

          $cordovaCamera.getPicture(options).then(function(imageURI) { // Get the picture recived from camera
                        console.log(imageURI);
                    }, function(err) {
                        console.log(err);
                    });
                });          
      

Then you can simply set the src of an img tag to imageURI retured, an it will display the image to user.

Request for Proposal

Recaptcha is required.

Sending message..