title: Phonegap + JQM - Camera API, cannot view captured photo
body: <p>I am trying out the Camera API for Phonegap and I have ran into a problem. Using the code from the Official Documentation:</p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
  
      var pictureSource;   // picture source
      var destinationType; // sets the format of returned value 
  
      // Wait for PhoneGap to connect with the device
      //
      document.addEventListener("deviceready",onDeviceReady,false);
  
      // PhoneGap is ready to be used!
      //
      function onDeviceReady() {
          pictureSource=navigator.camera.PictureSourceType;
          destinationType=navigator.camera.DestinationType;
      }
  
      // Called when a photo is successfully retrieved
      //
      function onPhotoDataSuccess(imageData) {
        // Uncomment to view the base64 encoded image data
        // console.log(imageData);
  
        // Get image handle
        //
        var smallImage = document.getElementById('smallImage');
  
        // Unhide image elements
        //
        smallImage.style.display = 'block';
  
        // Show the captured photo
        // The inline CSS rules are used to resize the image
        //
        smallImage.src = "data:image/jpeg;base64," + imageData;
      }
  
      // Called when a photo is successfully retrieved
      //
      function onPhotoURISuccess(imageURI) {
        // Uncomment to view the image file URI 
        // console.log(imageURI);
  
        // Get image handle
        //
        var largeImage = document.getElementById('largeImage');
  
        // Unhide image elements
        //
        largeImage.style.display = 'block';
  
        // Show the captured photo
        // The inline CSS rules are used to resize the image
        //
        largeImage.src = imageURI;
      }
  
      // A button will call this function
      //
      function capturePhoto() {
        // Take picture using device camera and retrieve image as base64-encoded string
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
      }
  
      // A button will call this function
      //
      function capturePhotoEdit() {
        // Take picture using device camera, allow edit, and retrieve image as base64-encoded string  
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true }); 
      }
  
      // A button will call this function
      //
      function getPhoto(source) {
        // Retrieve image file location from specified source
        navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
          destinationType: destinationType.FILE_URI,
          sourceType: source });
      }
  
      // Called if something bad happens.
      // 
      function onFail(message) {
        alert('Failed because: ' + message);
      }
  
      &lt;/script&gt;
  </code></pre>
  
  <p>And my button:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button onclick="capturePhoto();"&gt;Capture Photo&lt;/button&gt;
  </code></pre>
  
  <p>And img tag:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img style="display:none;width:60px;height:60px;" id="smallImage" src="" /&gt;
  </code></pre>
  
  <p>The camera opens up fine, and takes a photo no problem, however, it does not show up on the page.</p>
  
  <p>I have more code that lets you select an image form the photo album, and this works perfectly, displaying it in a different image tag.</p>
  
  <p>I believe the problem is that it cannot find imageData.</p>
  
  <p>The captured photo does get saved to the phone, and it can be displayed using the other button, but I want it to show straight after taking the photo.</p>
  
  <p>I am using JQM btw and compiling my APK using the Phonegap:Build web compiler.</p>