title: Crop Image from camera before upload (Phonegap)
body: <p>i would like to ask you..</p>
  
  <p>i have a code... using phonegap.. but i was confused about how to call / crop the image after take it from camera / file manager...</p>
  
  <p>here the code...  </p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /&gt;
      &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
      &lt;link rel="stylesheet" href="js/jquery.mobile-1.0.min.css" /&gt;
      &lt;script src="js/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.mobile-1.0.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8"&gt;
  
      var deviceReady = false;
  
      /**
       * Take picture with camera
       */
      function takePicture() {
          navigator.camera.getPicture(
              function(uri) {
                  var img = document.getElementById('camera_image');
                  img.style.visibility = "visible";
                  img.style.display = "block";
                  img.src = uri;
                  window.location.hash = "#page2";
                  /*document.getElementById('camera_status').innerHTML = "Success"; */
  
  
              },
              function(e) {
                  console.log("Error getting picture: " + e);
                  document.getElementById('camera_status').innerHTML = "Error getting picture.";
              },
              { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, targetWidth: 1153, targetHeight: 385
              }
  
              );
      };
  
      /**
       * Select picture from library
       */
      function selectPicture() {
          navigator.camera.getPicture(
              function(uri) {
                  var img = document.getElementById('camera_image');
                  img.style.visibility = "visible";
                  img.style.display = "block";
                  img.src = uri;
                  document.getElementById('camera_status').innerHTML = "Success";
                  window.location.hash = "#page2";
              },
              function(e) {
                  console.log("Error getting picture: " + e);
                  document.getElementById('camera_status').innerHTML = "Error getting picture.";
              },
              { quality: 50, targetWidth: 1153, targetHeight: 385, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY});
      };
  
      /**
       * Upload current picture
       */
      function uploadPicture() {
  
          // Get URI of picture to upload
          var img = document.getElementById('camera_image');
          var imageURI = img.src;
          if (!imageURI || (img.style.display == "none")) {
              document.getElementById('camera_status').innerHTML = "Take picture or select picture from library first.";
              return;
          }
  
          // Verify server has been entered
          server = document.getElementById('serverUrl').value;
          if (server) {
  
              // Specify transfer options
              var options = new FileUploadOptions();
              options.fileKey="file";
              options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
              options.mimeType="image/jpeg";
              options.chunkedMode = false;
  
              // Transfer picture to server
              var ft = new FileTransfer();
              $.mobile.showPageLoadingMsg();
              ft.upload(imageURI, server, function(r) {
                  document.getElementById('camera_status').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded.";
                  viewUploadedPictures();
                  $.mobile.hidePageLoadingMsg();
                  window.location.hash = "#page3";
              }, function(error) {
                  $.mobile.hidePageLoadingMsg();
                  document.getElementById('camera_status').innerHTML = "Upload failed: Code = "+error.code;               
              }, options);
          }
      }
  
      /**
       * View pictures uploaded to the server
       */
      function viewUploadedPictures() {
  
          // Get server URL
          server = document.getElementById('serverUrl').value;
          if (server) {
  
              // Get HTML that lists all pictures on server using XHR 
              var xmlhttp = new XMLHttpRequest();
  
              // Callback function when XMLHttpRequest is ready
              xmlhttp.onreadystatechange=function(){
                  if(xmlhttp.readyState === 4){
  
                      // HTML is returned, which has pictures to display
                      if (xmlhttp.status === 200) {
                          document.getElementById('server_images').innerHTML = xmlhttp.responseText;
                      }
  
                      // If error
                      else {
                          document.getElementById('server_images').innerHTML = "Error retrieving pictures from server.";
                      }
                  }
              };
              xmlhttp.open("GET", server , true);
              xmlhttp.send();         
          }   
      }
  
      /**
       * Function called when page has finished loading.
       */
      function init() {
          document.addEventListener("deviceready", function() {deviceReady = true;}, false);
          window.setTimeout(function() {
              if (!deviceReady) {
                  alert("Error: PhoneGap did not initialize.  Demo will not run correctly.");
              }
          },2000);
      }
  
      &lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body onload="init();"&gt;
    &lt;!-- Page 1 --&gt;
  &lt;div data-role="page" id="page1"&gt;
     &lt;!-- Page 1 Header --&gt;
     &lt;div data-role="header"&gt;
        &lt;h1&gt;Ambil Gambar&lt;/h1&gt;
     &lt;/div&gt;
     &lt;!-- Page 1 Content --&gt;
     &lt;div data-role="content"&gt;
        &lt;center&gt;
      &lt;a href="javascript:void(0)" onclick="takePicture();"&gt;
      &lt;img src="image/camera.png" width="150px" height="150px"&gt;
      &lt;/a&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;b&gt;Atau&lt;/b&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;a href="javascript:void(0)" onclick="selectPicture();"&gt;
      &lt;img src="image/upload.png"&gt;
      &lt;/a&gt;
  
      &lt;/center&gt;
  
     &lt;/div&gt;
     &lt;!-- Page 1 Footer --&gt;
     &lt;div data-role="footer"&gt;
        &lt;h4&gt;Footer 1&lt;/h4&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Page 2 --&gt;
  &lt;div data-role="page" id="page2"&gt;
     &lt;!-- Page 2 Header --&gt;
     &lt;div data-role="header"&gt;
        &lt;h1&gt;Header 2&lt;/h1&gt;
     &lt;/div&gt;
     &lt;!-- Page 2 Content --&gt;
     &lt;div data-role="content"&gt;
  
         &lt;img style="width:100%;visibility:hidden;display:none;" id="camera_image" src="" /&gt;
        &lt;input type="button" onclick="uploadPicture();" value="Upload Picture" /&gt;
        &lt;input id="serverUrl" type="text" value="http://kiosban.com/android/camera/upload.php" /&gt;
        Status : &lt;span id="camera_status"&gt;&lt;/span&gt;
        &lt;a href="#page3"&gt;Skip&lt;/a&gt;
     &lt;/div&gt;
     &lt;!-- Page 2 Footer --&gt;
     &lt;div data-role="footer"&gt;
        &lt;h4&gt;Footer 2&lt;/h4&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Page 3 --&gt;
  &lt;div data-role="page" id="page3"&gt;
     &lt;!-- Page 3 Header --&gt;
     &lt;div data-role="header"&gt;
        &lt;h1&gt;Header 3&lt;/h1&gt;
     &lt;/div&gt;
     &lt;!-- Page 3 Content --&gt;
     &lt;div data-role="content"&gt;
     &lt;div id="server_images"&gt;&lt;/div&gt;
        &lt;h3&gt;Server:&lt;/h3&gt;
          &lt;b&gt;Images on server:&lt;/b&gt;
          &lt;div id="server_images"&gt;&lt;/div&gt;
  
          &lt;input type="button" onclick="viewUploadedPictures();" value="View Uploaded Pictures" /&gt;
     &lt;/div&gt;
     &lt;!-- Page 2 Footer --&gt;
     &lt;div data-role="footer"&gt;
        &lt;h4&gt;Footer 2&lt;/h4&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want to call image crop on #page2, so there is an upload button to upload the cropped image... </p>
  
  <p>can anybody help me do that??</p>