Capturing Photos in Cordova or PhoneGap

In this post we will take a look on capturing photos using PhoneGap or CorDova. To start with make sure to add reference of coredova .

<script src="cordova.js"></script>

I have put one button and an image control. On click of button camera will be launched and then we will bind (display) captured photo in image control.

<button onclick="takePhoto();">Take Photo</button> <br>
<img style="display:none;width:60px;height:60px;" id="img" src="" />

takePhoto() function will be called on click event of the button . You can capture photo as following

function takePhoto() {

navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
 quality: 50,
 destinationType: destinationType.DATA_URL
 }
 );

We are using navigation.camera.getPicture function to capture photo. There are many optional parameters can be passed to this function. Those parameters are as follows,

Quality of image: quality

This is a number in range of 0 to 100 to define quality of image

Destination type: destinationType

This chooses the format of the return value. It could return image as base64 encoded string or return image file URI.

Source Type: sourceType

It sets the source of the picture. Source type could be PhotoLibrary , Camera , SavedPhotoAlbum. You can choose either of them.

Other options are as follows,

• targetWidth a number value
• targetHeight a number value
• EncodingType. This could be jpeg(0) or png(1)
• allowEdit : Boolean value to allow edit before image selection

In above scenario we have set parameters like quality and destination type. After successful selection of image onPhotoDataSuccess function will be called. In this function we will bind selected image to image control.

function onPhotoDataSuccess(imageData) {
 var imgControl = document.getElementById('img');
 imgControl.style.display = 'block';
 imgControl.src = "data:image/jpeg;base64," + imageData;
 }

If there is error selecting photo then onFail() function will be called. We can simply display an error message in this function.

function onFail(message) {
 alert('Failed because: ' + message);
 }

In this way you can work with pictures in CorDova. I hope you find this post useful. Thanks for reading.