title: Multiple image resize with canvas
body: <p>I've built a drag and drop image uploader.
  I want to automatically create thumbnails of each image.
  I used html5 canvas, but when I'm uploading 20 or more 2MB images at once, the browser (safari) crashes. When I leave the resize function out, everything works fine.
  Any suggestions on how to handle this? Thank you very much!</p>
  
  <p>this is the resize function that is called on every image:</p>
  
  <pre><code>if(this.hasFileReader){
      var reader = new FileReader();
      reader.readAsDataURL(this.file);
      var file = this.file;
      reader.onloadend = function(e){
          var tempImg = new Image();
          tempImg.src = reader.result;
          tempImg.onload = function() {
  
              var MAX_WIDTH = 348;
              var MAX_HEIGHT = 300;
              var tempW = tempImg.width;
              var tempH = tempImg.height;
              if (tempW &gt; tempH) {
                  if (tempW &gt; MAX_WIDTH) {
                     tempH *= MAX_WIDTH / tempW;
                     tempW = MAX_WIDTH;
                  }
              } else {
                  if (tempH &gt; MAX_HEIGHT) {
                     tempW *= MAX_HEIGHT / tempH;
                     tempH = MAX_HEIGHT;
                  }
              }
  
              var canvas = document.createElement('canvas');
              canvas.width = tempW;
              canvas.height = tempH;
              var ctx = canvas.getContext("2d");
              ctx.drawImage(this, 0, 0, tempW, tempH);
              var dataURL = canvas.toDataURL("image/jpeg");
  
              var xhr = new XMLHttpRequest();
              xhr.open('POST', 'uploadResized.php', true);
              xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
              var data = 'image=' + dataURL + '&amp;name=' + file.name + '&amp;type=' + file.type;
              xhr.send(data);
          }
  }
  </code></pre>