Javascript 文件读取器在读取图像时会消耗大量内存

我正在开发一个应用程序，我需要在本地显示大量图像（上传前）。Firefox正在使用大约2GB的内存来读取10个图像（每个图像大小为5MB）。由于内存的巨大消耗，Firefox挂起，产生崩溃或重启问题。请建议如何在读取每个文件后释放一些内存

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);                              

以下是读取文件后要执行的步骤

读取图像并检查Exif数据（我需要Exif数据来检查图像的方向。请让我知道这是否可以简化）

如果方向已更改，因此我正在旋转其他具有相同高度和宽度的绘制图像

在那之后，我取了两种不同尺寸的base64。一个用于缩略图，另一个用于完整图像预览

---

最后，我将在对象数组中添加这些base64图像，然后将缩略图显示到angular应用程序中。

能否向我们展示用于显示图像的代码？请检查是否需要了解其他信息。我已经用我正在执行的代码添加了步骤。以下是在Firefox上评测内存使用情况的提示：-请尝试缩小范围，以便您知道哪些特定对象导致内存使用率高。有人建议我们如何在每次读取文件后从文件读取器中释放内存吗？您可以向我们展示您正在使用的代码以帮助我们解决此问题吗显示图像？请检查是否还有其他需要知道的事情。我已经用我正在执行的代码添加了步骤。以下是在Firefox上评测内存使用情况的提示：-请尝试缩小范围，以便您知道哪些特定对象导致内存使用率高。有人建议我们如何在每次读取文件后从文件读取器释放内存吗？