How To Quick Start In Ionic Framework

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

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

1 2 3 4 5 6 7 8 9 10 11 12

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.

1 2 3 4 5 6

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

Read More at - http://www.oodlestechnologies.com/blogs/How-To-Quick-Start-In-Ionic-Framework