这是我的示例代码:
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的内存.我想,这是预期的,但令我担心的是内存似乎永远不会被垃圾收集器释放.因此,如果我继续选择更多照片,我会继续消耗更多内存.我不知道这是否与崩溃问题有关,但这绝对是一个问题.
谢谢你的帮助!