title: canvas.toDataUrl returns empty, canvas size is not zero
body: <p>Im writing app in html5 that needs to be work on cell phones,
  this app uploads an image from the phone to server of my company.
  Now its working on android and inthe computer, on Iphone its work only when i picture in the front camera, if i get a pic from the back camera I get empty data.</p>
  
  <p>I create an InputElement type file,
  and event onChange for the input element, that call the function inputFile_onChange that get an ElementEvent el:</p>
  
  <pre><code>    var file = el.target.files[0];
      var reader = new FileReader();
      reader.onloadend = (function(theFile) {return function(e) {
      $('#uploadImage').attr('src',e.target.result);
      $('#uploadImage').css('display','none');
      $($('#uploadImage')[0]).one('load',function(){
      var cvs = document.createElement('canvas');
      $image = $('#uploadImage')[0];
      var savingCanvas = document.createElement('canvas');
      savingCanvas.width = $image.naturalWidth;
      savingCanvas.height = $image.naturalHeight;
      var savingCanvasCtx = savingCanvas.getContext('2d');
      FileUploadApp._globals.drawImage(savingCanvasCtx, $image, 0, 0,    
      savingCanvas.width,savingCanvas.height);
      var newImageData = savingCanvas.toDataURL('image/jpeg', 0.2);
      }).each(function() {if(this.complete) $(this).load();});
       };
      })(file);
      reader.readAsDataURL(file);
  </code></pre>
  
  <p>I put an alert after the newImageData create and get "data: ," when i look for answer in the web i see that i get this if canvas sizes are 0, but i also print the size - width and hight and both of them are big >1000</p>
  
  <p>Ill be glad to get some help with it.</p>