Camera Example 1
In this section, we will step through writing an application that will allow you to take pictures using the smartphone camera using PhoneGap APIs on iPhone.
Create a new PhoneGap iPhone project, using the steps from the previous examples. Name the project pg_camera. The complete source code to the completed application is available online at: http://github.com/VGraupera/PhoneGap-Photos-Sample.
Replace the generated index.html file in the www directory with the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
<meta name="viewport" content="width=default-width; user-scalable=no" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset=*
<script src="jqtouch/jqtouch.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="jqtouch/jqtouch.css" type="text/css" media="screen"^ title="no title" charset="utf-8">
<link rel="stylesheet" href="themes/apple/theme.css" type="text/css" media="screen"^ title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> // initialize jQTouch with defaults var jQT = $.jQTouch();
function onBodyLoad() {
document.addEventListener("deviceready",onDeviceReady,false);
function dump_pic(data) {
document.getElementById("test_img").src = "data:image/jpeg;base64," + data;
function takePicture() { navigator.camera.getPicture(dump_pic, fail, { quality: 50 });
<body onload="onBodyLoad()"> <div id="home"> <div class="toolbar"> <h1>Pictures</h1>
<a class="button add" href="#" onClick="takePicture();">+</a> </div>
<img id="test_img" style="width:100%" src="" /> </div> </body> </html>
Post a comment