Question

我正在开发一个应用程序，我需要在本地显示大量图像（在上传之前）。 Firefox使用大约2 GB的内存来读取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。一个用于缩略图＆amp;另一个用于完整图像预览

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

文件阅读器在阅读图像时消耗大量内存

0 个答案: