Javascript FileReader 在读取本地镜像时占用所有内存

Question

我正在制作一个集中显示本地驱动器中大量图像的缩略图。

使用 HTML5 文件 API 似乎很有可能，但是当我尝试加载大量图像时，浏览器的内存使用量会超过屋顶并崩溃。

我认为问题是 FileReader 在读取文件后没有释放内存。

最初我有一个新的 FileReader 实例和一个简单的循环来遍历图像。

为了解决这个内存问题，我将其替换为只有一个 FileReader，但它并没有真正帮助。

这是相关的代码块:

<script>

var areader = new FileReader();
var counter=0;

function loadImage(file) {
    var canvas = document.createElement("canvas");
    areader.onload = function (event) {
        var img = new Image;

        img.onload = function () {
            canvas.width = img.width / 100;
            canvas.height = img.height / 100;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, img.width / 100, img.height / 100);
            var browse = document.getElementById("uploadInput");
            if (browse.files.length > counter) {
                counter++;
                areader.result = null;//I don't think this makes any difference
                loadImage(browse.files[counter]);
            }
        };

        img.src = event.target.result;
    };
    areader.readAsDataURL(file);
    preview.appendChild(canvas);
}

function showImages() {
    loadImage(document.getElementById("uploadInput").files[0]);

}

如果有人遇到这个问题，我做了一些非常愚蠢的事情，你能回复吗。

谢谢，

塔玛斯

Answer 1

它不是文件读取器，而是您使用 base64 格式的整个图像数据作为图像的 src 属性，这实际上会占用内存中图像大小的 133%。

你应该使用 Blob URLs相反:

var URL = window.URL || window.webkitURL;

function loadImage( file ) {
    var canvas = document.createElement("canvas"),
        img = new Image();

    img.onload = function() {
        canvas.width = img.width / 100;
        canvas.height = img.height / 100;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width / 100, img.height / 100);
        URL.revokeObjectURL( img.src );
        img = null;

        var browse = document.getElementById("uploadInput");
            if (browse.files.length > counter) {
            counter++;
            loadImage(browse.files[counter]);
        }
    };
    img.src = URL.createObjectURL( file );

    preview.appendChild(canvas);
}