Javascript HTML5文件API在使用readAsDataURL加载选定图像时会使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);
});

加载页面，选择一个大图像（我使用的是一个2.9MB 4288x3216图像）。刷新页面并选择相同的图像。结果如何？标签崩溃了！（哇，啪的一声！）

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

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

---

谢谢你的帮助

内存问题可能是此错误的结果：。从本质上讲，Chrome is缓存数据：URL，并且当前在

img.src

更改时不会释放内存。另一个问题是数据：URL会给正在编码的数据带来33%的开销。这意味着您实际上在映像上设置了~3.85MB的资源，而不是2.9MB

由于您没有操作内容（实际字节），因此无需读取文件内容。一个选项是创建blob:url。还有一个显式的revoke方法，因此您不会遇到相同的内存缓存问题。比如：

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

---

window.webkiURL应该是window。webkitURL@AbidOmar：谢谢你发错信号。请注意，您可以编辑任何答案来改进它。