javascript - File reader consuming lots of memory when reading images -

i working on application need show bulk of images locally (before upload). firefox using approx 2 gb memory reading 10 images (which 5mb size each). due huge consumption of memory, firefox hanging, generating crashes or restart issues. please suggest how might release memory after each file read.

reader.onloadend = function (e) {       binary = atob(reader.result.split(',')[1]);     exif = exif.readfrombinaryfile(new binaryfile(binary));     binary = null;     console.info("exif data",exif.orientation);     tempimg = new image();     tempimg.src = reader.result;       tempimg.onload = function (){          var tempw = tempimg.width;         var temph = tempimg.height;         console.log(1,tempw,temph);         // initialize canvas         var canvas = document.createelement('canvas');         var ctx = canvas.getcontext("2d");          // check if image orientation changed         switch(exif.orientation){              case 6:                 isrotate = 90;                 var newwidth = this.height;                  this.height = this.width;                  this.width = newwidth;                   tempw = this.width;                  temph = this.height;                 break;              case 8:                  isrotate = -90;                  var newwidth = this.height;                  this.height = this.width;                  this.width = newwidth;                   tempw = this.width;                  temph = this.height;                  break;         }         exif = null;         // resize image         console.log(2,tempw,temph);          var uploadsrc,resizes,previewsrc;                 canvas.width = tempw;                 canvas.height = temph;                 if(isrotate !=null){                                                                ctx.clearrect(0,0,canvas.width,canvas.height);                     ctx.translate(tempw/2,temph/2);                     ctx.rotate(isrotate*math.pi/180);                     ctx.drawimage(tempimg,0,0,this.height,this.width,-temph/2,-tempw/2,canvas.height,canvas.width);                 }                 else{                                                               ctx.drawimage(tempimg, 0, 0,tempw,temph);                  }                  resizes = getuploadresizes(tempw, temph);            uploadsrc = canvas.todataurl("image/jpeg",0.85); // data canvas 70% jpg (can png, etc.)                                          arraytoupload.push(uploadsrc);         tempw = resizes.thumb_width;         temph = resizes.thumb_height;         // create thumb data src         var canvas2 = document.createelement('canvas');         var ctx2 = canvas2.getcontext("2d");         canvas2.width = tempw;         canvas2.height = temph;          ctx2.drawimage(canvas, 0, 0, tempw, temph);                                     var thumbsrc = canvas2.todataurl("image/jpeg",0.85);     } }reader.readasdataurl(file);                               

here steps perform after file read

1. read image , check exif data (i need exif data checking image's orientation. please let me know if can simplified)

2. if orientation has been changed rotating image other draw image same height width.

3. after fetch base64 2 different sizes. 1 thumbnail & other full image preview

lastly add these base64 images in object array, display thumbnails angular app.