11

这是我的示例代码：

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 的内存。我想这是意料之中的，但我担心的是内存似乎永远不会被垃圾收集器释放。所以如果我继续选择更多的照片，我会一直消耗更多的内存。我不知道这是否与崩溃问题有关，但这绝对是一个问题。

谢谢你的帮助！

4

1 回答 1

16

内存问题可能是这个错误的结果： http: //crbug.com/36142。img.src本质上，Chrome 是缓存 data: URLs 并且当前在更改时不会释放内存。另一个问题是 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);
});
于 2011-06-09T20:34:13.593 回答