File reader consuming lots of memory when reading images

Question

I am working on an application where I need to show a bulk of images locally (before upload). Firefox is using approx 2 GB memory to reading 10 images (which are 5MB size each). Due to this huge consumption of memory, Firefox is hanging, generating crashes or restart issues. Please suggest how I might release some memory after each file is 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); // get the data from canvas as 70% JPG (can be also 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 are the steps to perform after the file is read

1. Read image and check for Exif data (I need exif data for checking the image's orientation. Please let me know if this can be simplified)

2. If the orientation has been changed so I am rotating image other draw image with same height width.

3. After that I fetch base64 for two different sizes. One for the thumbnail & the other for a full image preview

Lastly I will add these base64 images in an object array, then display the thumbnails into the angular app.