title: Shrink image before uploading with javascript
body: <p>I'm writing a cross-platform mobile application using phonegap,
  and i have a file-upload input for image uploading of single images.</p>
  
  <p>The problem is that most pictures being uploaded are ones taken using the mobile phone which are around 4MB in size.</p>
  
  <p>I want to shrink those images dramatically, as i don't need them in high quality at all.</p>
  
  <p>Also, i need them converted to base64 and not in real image file. (That i already have using FileReader)</p>
  
  <p>Any ideas how to achieve this? Maybe using canvas or something?</p>
  
  <p><strong>Update:</strong>
  here is what i have so far:</p>
  
  <pre><code>function shrink() {
      var self = this;
  
      var reader = new FileReader(); // init a file reader
      var file = $('#file-input').prop('files')[0]; // get file from input
  
      reader.onloadend = function() {
  
          // shrink image
          var image = document.createElement('img');
          image.src = reader.result;
  
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          ctx.drawImage(image, 0, 0, 300, 300);
          var shrinked = canvas.toDataURL('image/jpeg');
          console.log(shrinked);
      };
  
      reader.readAsDataURL(file); // convert file to base64*/
  }
  </code></pre>
  
  <p>but all i get is a black image
  Thanks</p>