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

Question

这是我的示例代码:

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

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

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

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

谢谢你的帮助!

Answer 1

内存问题可能是这个错误的结果:http://crbug.com/36142.从本质上讲,Chrome会缓存数据:URL并且当img.src更改时当前不会释放内存.另一个问题是数据:URL会使您编码的数据产生33%的开销.这意味着你实际上在图像上设置了~3.85MB的资源,而不是2.9MB.

由于您没有操作内容(实际字节),因此无需读取文件内容.一种选择是创建一个blob:url.还有一个显式的撤销方法,因此您不会遇到相同的内存缓存问题.就像是:

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

  window.URL = window.webkitURL || window.URL; // Vendor prefixed in Chrome.

  var img = document.createElement('img');
  img.onload = function(e) {
    window.URL.revokeObjectURL(img.src); // Clean up after yourself.
  };
  img.src = window.URL.createObjectURL(file);
  document.body.appendChild(img);
});