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.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Ankit Singh Rana
Ankit is a UI Developer having experience in Angular 2, Angular JS, JavaScript, HTML5 and CSS3. His hobbies includes playing video Games and traveling.