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.

image

Source Type: sourceType

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

image

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.

About these ads

One thought on “Capturing Photos in Cordova or PhoneGap

  1. Pingback: Dew Drop – September 10, 2013 (#1,621) | Morning Dew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s