Blog

  • 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.

Tags: cordova