One of the great promises of PhoneGap is it ability to access a device's hardware from an easy to code, web-style development environment. In this tutorial we will show how to the device's camera, capture an image, scale it, render it to a page. This tutorial is for iOS, but it should work across devices.
Next is the Dimensions code. This object consists of two methods, one which dynamically determines the dimensions of the jQuery Mobile page content area. The second which returns those dimensions.
Finally is there is the page code. It has only two externally accessible methods, the handlers for the "pageshow" and "pagehide" events. Most of the app's logic is inside of the "pageshow" event handler.
Once a "pageshow" event occurs, it calls the Dimension code. It is important to wait for this event since it indicates that jQuery Mobile has rendered, which is necessary for us since when need to determine the size of the header and footer. We use the size of the content area to set the size of the "#picFrame".
The last thing the "pageshow" event handler does is to bind a tap event handler to the "Snap!" button. Inside of the event handler we call PhoneGap's navigator.camera.getPicture() method. Also we do a performance enhancers here as well. I know that event.preventDefault() and return false speed things up by keeping unnecessary code from executing. I am hoping the event.stopPropagation() will also help.
We also bind an event handler to the onload event of the <img> element. When this event is triggered, we use it to get the width and height of the <img>. We then use HTML to scale the image for us. By setting only dimension, HTML will automatically "set" the other for us and maintain the aspect ratio.
That's it for this tutorial. I planned to do at least one more exploring the camera. As always the code for this tutorial is on my GitHub account.
iOS PGCamera on GitHub
Android PGCamera on GitHub