High JavaScript memory usage with FileReader, images and <canvas> -

i working on image multi upload, sounds good, .. memory issue.

script goal survive uploading of 100+ images (300mb+). if find (i still javascript lame) issue, please give me advice. thanks.

my code:

cfilereader.prototype.proccessfile = function(cb) {     // means file     var reader = new filereader();     reader.readasdataurl(this);     reader.onload = (function (f) {          return function(e) {             var image = new image();             image.src = e.target.result;             image.onload = (function(f) {                 return function() {                     var maxwidth = 700,                         maxheight = 700,                         imagewidth = this.width,                         imageheight = this.height;                      if (imagewidth > imageheight) {                       if (imagewidth > maxwidth) {                         imageheight *= maxwidth / imagewidth;                         imagewidth = maxwidth;                       }                     }                     else {                       if (imageheight > maxheight) {                         imagewidth *= maxheight / imageheight;                         imageheight = maxheight;                       }                     }                     var canvas = document.createelement('canvas');                     canvas.width = imagewidth;                     canvas.height = imageheight;                      var ctx = canvas.getcontext("2d");                     ctx.drawimage(this, 0, 0, imagewidth, imageheight);                     if(typeof cb == 'function') {                         cb(f,canvas.todataurl());                     }                     delete canvas;                     delete ctx;                     return;                 }             })(f);          };     })(this);     } 

i think window.createobjecturl faster filereader, should use both fall filereader...also can check performance each operation because there differences per browser eg http://jsperf.com/canvas-image-resizing , not forget revokeobjecturl memory reasons...also yous webworkers http://www.html5rocks.com/en/tutorials/file/filesystem-sync/#toc-readingsync

    if("createobjecturl" in window || "url" in window &&      "createobjecturl" in window.url || "webkiturl" in window &&      "createobjecturl" in window.webkiturl) {          if("createobjecturl" in window) {              // chrome exposes create/revokeobjecturl directly on window              objurl = window.createobjecturl(file);          } else if("webkiturl" in window) {              // chrome exposes create/revokeobjecturl on new  webkiturl api              objurl = window.webkiturl.createobjecturl(file);          } else {              // ff4 exposes create/revokeobjecturl on new url api              objurl = window.url.createobjecturl(file);          }           // resize image          // stored in             // objurl } else {      // fallback filereader ff3.6                  reader = new filereader();     reader.onload =  function(event) {                                                                           // resize image          // stored in             // event.target.result                      }      reader.onprogress = function (evt) {        if (evt.lengthcomputable) {             var percentloaded = math.round((evt.loaded / evt.total) * 100);             console.log(percentloaded);        }     }     reader.readasdataurl(file);                                                                  }