Camera and Photo Library

Another useful bridging feature of PhoneGap is the ability to grab a photo from the device. Photos can be imported into the application either from the camera directly or from the user’s photo library on the device. The code snippet in the PhoneGap sample is shown here:

function show_pic() { var viewport = document.getElementById('viewport'); viewport.style.display = ""; navigator.camera.getPicture(dump_pic, fail, { quality: 50 });

function dump_pic(data) { var viewport = document.getElementById('viewport'); console.log(data); viewport.style.display = ""; viewport.style.position = "absolute"; viewport.style.top = "10px"; viewport.style.left = "10px"; document.getElementById("test_img").src = "data:image/jpeg;base64," + data;

CHAPTER 9: Native Bridging with PhoneGap

function fail(fail) { alert(fail); }

The show_pic function in the preceding code is called when the Get Picture button (shown in Figure 9–8) in the sample interface is clicked. To view this button in the emulator or standard DPI device, you will need to scroll down the page.

Figure 9–8. Scroll down the sample interface to reveal the extra demo buttons. Using PhoneGap to retrieve a picture involves calling the camera.getPicture method,

which is once again attached to the navigator object. As you can probably see, getPicture uses a method signature similar to watchAcceleration, which is used to monitor the accelerometer:

The first parameter takes a success callback, and this will be called in the case that an image is back from the device.

The second parameter takes a failure callback, which is called when no image is returned. This includes the situation where the user cancels taking the picture.

The third and final parameter takes options that affect the behavior of the getPicture method. There are three different named options that can be specified for the options object:

CHAPTER 9: Native Bridging with PhoneGap

quality (default: 80): A numeric value in the range of 1 to 100 that specifies the quality of the image that should be returned. While you may be thinking that you should just set the image quality to 100 so you get the very best image, images with quality values above 90 or so can get large very quickly. It is recommended that the default setting be used.

destinationType (default: DATA_URL): An enumerated value for how the image data should be returned. The two valid JavaScript values that can be specified for this option are Camera.DestinationType.DATA_URL and Camera.DestinationType.FILE_URI. (A comparison between data URLs and file URIs [uniform resource identifiers] can be found in the following note.)

sourceType (default: CAMERA): For Android, this can be specified as one of two values. One is Camera.Picturesourcetype.CAMERA, which specifies retrieving a new image from the camera, and the other is Camera.PictureSourceType.PHOTOLIBRARY, which specifies retrieving an image from the photo library on the device.

With that in mind, if we wanted to retrieve an image from our Android device’s photo library rather than the camera, and then wanted to return the file URI for the selected image, the following code would do the trick:

navigator.camera.getPicture(successHandler, failureHandler, { quality: 50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY

}); The result of calling the preceding code would yield a display similar to that shown in

Figure 9–9.

CHAPTER 9: Native Bridging with PhoneGap

Figure 9–9. PhoneGap can be used to retrieve photos from the photo library as well as the camera.

NOTE: Previously, we made reference to the use of data and file URIs. Typically, images in HTML are loaded from either a file or an HTTP URI string—for example, file://resources/test.jpg and http://test.com/test.jpg are examples of a file and an HTTP URI, respectively. While these are the most common ways to load an image (or other resources) into an HTML document, they are not the only way to do so.

Data URIs offer an alternative to referencing an external resource, and are able to encapsulate the actual data that should be displayed. Data URIs can be particularly useful when developing mobile web apps, as resource data can be included within HTML or CSS, or even copied to local storage for caching purposes. This in turn reduces the number of remote requests that need to

be made to display a page, which can go a long way toward speeding up a mobile web application.

For more information on the data URI format, the Mozilla Developer Center offers a nice explanation (see https://developer.mozilla.org/en/The_data_URL_scheme).

CHAPTER 9: Native Bridging with PhoneGap

Camera and Photo Library