PhoneGap Camera Tutorial

The html page has 3 sections. The first section contains 2 clickable items enclosed in a listview. A message box which gives a brief explanation of that to expect. And the last section is a popup window to show the image.

The 2 items are anchors with an uniqu id, once it is selected, the corresponding function will be launched. They are unordered list items enclosed in a listview. Since they are anchors, you will see an arrow added at the very right.

 <ul data-role="listview" data-inset="true">				
 <li><a href="#" id="capturePhoneButton">Capture Photo</a></li>
 <li><a href="#" id="fromPhotoLibraryButton">From Photo Library</a></li>
 </ul>

When either of the item is picked,the PhongGap function navigator.camera.getPicture is called. The difference is of the destination type we pass to the function. To get the image by taking a picture, the destination type is “destinationType.FILE_URI”. Whereas when getting the image from the photo library, the type used is “destinationType.FILE_URI” and we use the source Type of “pictureSource.PHOTOLIBRARY”

Capture image from camera

 navigator.camera.getPicture(onPhotoURISuccess, photoOnFail, { quality: 50, destinationType: destinationType.FILE_URI });

Retrieve image from library

  navigator.camera.getPicture(onPhotoURISuccess, photoOnFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: pictureSource.PHOTOLIBRARY });

Source Code:

Javascript

<script type="text/javascript" charset="utf-8">
    //*********************************************************    
    // Camera Capabilities
    //********************************************************* 
    var pictureSource;
	var destinationType;
	
	function updateCameraStatus(status) {
		$("#cameraStatus").html(status);
	}
    
    function photoOnFail(message) {
    	updateCameraStatus("ERROR: " + message);
    }
    
    function onPhotoDataSuccess(imageData) {
		$("#popImage").attr("src", "data:image/jpeg;base64," + imageData);
		$("#popupPhoto").popup("open");
    }
	
    function onPhotoURISuccess(imageURI) {
    	$("#popImage").attr("src", imageURI);
    	//$("#pictBox").empty();
    	//$("#pictBox").append(imageURI).trigger("create");
    	$("#pictBox").html(imageURI);
    	updateCameraStatus("SUCCESS: Image loaded");
    	$("#popupPhoto").popup("open");
    }

    function capturePhoto() {
 		navigator.camera.getPicture(onPhotoURISuccess, photoOnFail, { quality: 50, destinationType: destinationType.FILE_URI });
	}

    //Android ignores the allowEdit parameter
    function capturePhotoEdit() {
		navigator.camera.getPicture(onPhotoDataSuccess, photoOnFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL });
    }

    //source could be Camera.PictureSourceType.PHOTOLIBRARY and SAVEDPHOTOALBUM, in Android, they are the same.
    function getPhoto(source) {
    	updateCameraStatus("");        
		navigator.camera.getPicture(onPhotoURISuccess, photoOnFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source });
    }
    
    function getCameraReady() {
    	$("popupPhoto").popup("close");    	
    	updateCameraStatus("");
		pictureSource   = navigator.camera.PictureSourceType;
		destinationType = navigator.camera.DestinationType;
		
		$('#capturePhoneButton').on('vclick', function(e) {
			e.preventDefault();
			capturePhoto();
			return false;
		});
		
		$('#fromPhotoLibraryButton').on('vclick', function(e){
			e.preventDefault();
			getPhoto(pictureSource.PHOTOLIBRARY);
			return false;
		});
    }

	//*********************************************************    
	// initialize the environment
	//*********************************************************	
	$("#cameraMainPage").bind("pagebeforeshow", function() { getCameraReady(); } );

HTML 5/JQuery Mobile

<!DOCTYPE HTML>
<html><head><title>Camera</title></head>
<body>
	<!---------------------------------- Camera ------------------------------------------>
	<div data-role="page" id="cameraMainPage" data-add-back-btn="true" back-btn-text="back">
		<div data-role="header">
			<h1>Camera</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview" data-inset="true">
				<li><a href="#" id="capturePhoneButton">Capture Photo</a></li>
				<li><a href="#" id="fromPhotoLibraryButton">From Photo Library</a></li>
			</ul>
			
			<div class="mesgBox">
  				<h5 class="hlabel">Using camera.getPicture method</h5>
	  			<ul class="smFont">
	  				<li>For both of the above menu items, URI is used to retrieve the image.<br/>
	  				    Along with each image, the corresponding URI is shown.
	  				</li>
	  			</ul> 			
	  		</div>
			
			<div data-role="popup" id="popupPhoto" class="ui-content" data-theme="e" data-corners="false">
				<h5 class="hlabel">Image URI</h5>
				<p id="pictBox" class="content mesgBox"></p>
				<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
				<img class="popphoto" id="popImage" src="">
			</div>
		</div>
		<div data-role="footer">
			<div id="cameraStatus"></div>
		</div>
		
		<script type="text/javascript" charset="utf-8" src="js/camera-min.js"></script>	
	</div>
</body>
</html>