使用 readAsDataURL 加载选定图像时，HTML5 文件 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 图像）。刷新页面并选择相同的图像。结果？选项卡崩溃了！ （噢，啪！）

我的猜测是，这是 Chrome 的文件 API 实现中的一个错误，但如果有人能够确认这一点，甚至可能提供解决方法，我会很高兴。我真的希望能够显示照片的缩略图，而不必去服务器生成缩略图（即使它仅适用于 Chrome 和 FF）。

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

感谢您的帮助！

Answer 1

内存问题可能是由以下错误引起的：http://crbug.com/36142。本质上，Chrome 会缓存 data: URL，并且当前在 img.src 更改时不会释放内存。另一个问题是 data: 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);
});