小编umm*_*cat的帖子

使用readAsDataURL加载所选图片时,HTML5 File API会崩溃Chrome

这是我的示例代码:

var input = document.createElement('input');
input.type = 'file';
document.body.appendChild(input);

input.addEventListener('change', function(){
    var file = input.files[0];

    var reader = new FileReader();
    reader.onload = function(e){
        var image = new Image();
        image.src = e.target.result;
    };
    reader.readAsDataURL(file);
});
Run Code Online (Sandbox Code Playgroud)

加载页面,选择一个大图像(我使用的是2.9MB 4288x3216图像).刷新页面并选择相同的图像.结果?标签崩溃了!(噢,Snap!)

我的猜测是,这是Chrome实施File API的一个错误,但如果有人能够确认,甚至可能提供解决方法,我会喜欢它.我真的希望能够显示照片的缩略图,而不必去服务器生成一个(即使它仅适用于Chrome和FF).

此外,使用上面的示例代码,只要您选择照片,该选项卡就会开始使用大约32MB的内存.我想,这是预期的,但令我担心的是内存似乎永远不会被垃圾收集器释放.因此,如果我继续选择更多照片,我会继续消耗更多内存.我不知道这是否与崩溃问题有关,但这绝对是一个问题.

谢谢你的帮助!

javascript html5 google-chrome fileapi

9
推荐指数
1
解决办法
7700
查看次数

标签 统计

fileapi ×1

google-chrome ×1

html5 ×1

javascript ×1