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

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

使用HTML5文件API似乎是很有可能的，但当我尝试加载大量图像时，浏览器的内存使用量会急剧增加，崩溃

我认为问题在于文件阅读器在读取文件后不会释放内存

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

为了解决这个内存问题，我将其替换为只有一个文件读取器，但它并没有真正的帮助

以下是relevand代码块：

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

}

var areader=new FileReader（）；
var计数器=0；
函数loadImage（文件）{
var canvas=document.createElement（“canvas”）；
areader.onload=功能（事件）{
var img=新图像；
img.onload=函数（）{
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”）；
如果（browse.files.length>计数器）{
计数器++；
areader.result=null；//我认为这没有什么区别
loadImage（browse.files[counter]）；
}
};
img.src=event.target.result；
};
areader.readAsDataURL（文件）；
preview.appendChild（画布）；
}
函数showImages（）{
loadImage（document.getElementById（“uploadInput”）.files[0]）；
}

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

谢谢

---

Tamas

它不是文件读取器，而是使用base64中的整个图像数据作为图像的

src

属性，该属性实际上占用了图像在内存中大小的133%

您应改为使用：

---

即使如此，浏览器也必须保留所有图像的像素信息，不是吗？@Pointy好的，是的，但是你可以在

之后扔掉img。drawImage

是的，但它必须保持像素可用，因为代码随时可能通过canvas API要求返回。至少，在我看来是这样。@Pointy在这个例子中，只有画布中的像素被保存在内存中，而不是整个图像，更不用说作为base64复制的整个图像了

drawImage

没有对图像进行任何引用，它将图像的像素复制到画布上。@Pointy哦，还有，javascript字符串需要2个字节。因此，在

.src

属性中将图像二进制文件作为64基编码字符串，实际上会占用图像大小的266%作为内存，是吗我们在这里谈论的图像有多少？图像有多大？这是所有浏览器都有问题还是只有一个？

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