title: Resize image before upload - convert canvas to a File object
body: <p>Here's the code fragment I'm using now to upload multiple images using HTML5 File API:</p>
  
  <pre><code>/**
   * @param {FileList} files
   */
  upload: function(files){
      nfiles = files.length;
  
      for (var i = 0; i &lt; nfiles; i++) {
          /** @var file File **/
          var file = files[i];
  
          var xhr = new XMLHttpRequest();
  
          xhr.open("POST", settings.post_upload, true);
          xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
          xhr.upload.filenumb = i;
          xhr.filenumb = i;
          xhr.upload.filename = file.name;
  
          var nef = new FormData();
          nef.append("folder", settings.folder);
          nef.append("file_element", settings.file_elem);
          nef.append("udata", settings.user_data);
          nef.append(settings.file_elem, file);
          xhr.send(nef);
  
      }
  }
  </code></pre>
  
  <p>I'd like to resize the images <em>before</em> upload using canvas object, but not having experience with this, I'm not sure how can update the code using techniques, e.g. the one described here: <a href="https://stackoverflow.com/questions/10333971/html5-pre-resize-images-before-uploading">HTML5 Pre-resize images before uploading</a></p>
  
  <p><code>canvas.toDataURL("image/png");</code> will return an encoded string. But I need to post the <code>File</code> object. </p>
  
  <h2>Edit</h2>
  
  <p>How would you write (reasonably) cross browser function for most modern browsers to resize the File before upload, handling jpg,png and gifs with transparency:</p>
  
  <pre><code>/** 
   * @param {File} file 
   * @param int max_width
   * @param int max_height
   * @param float compression_ratio
   * @returns File
   */
  function resize(file, max_width, max_height, compression_ratio){}
  </code></pre>