使用readAsDataURL加载选定图像时，HTML5 File API会导致Chrome崩溃

问题描述

这里是我的示例代码：

Here's my sample code:

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图片）。刷新页面并选择相同的图像。结果？该选项卡崩溃！ （Aw，Snap！）

Load the page, select a large image (I'm using a 2.9MB 4288x3216 image). Refresh the page and select the same image. Result? The tab crashes! (Aw, Snap!)

我的猜测是，这是Chrome实施File API时的一个错误，但如果有人可以证实这一点，甚至提供解决方法。我真的希望能够显示照片的缩略图，而不必去服务器生成一个（即使它只适用于Chrome和FF）。

My guess is that this is a bug with Chrome's implementation of the File API, but I'd love it if someone could confirm that and maybe even offer a workaround. I really want to be able to show a thumbnail of a photo without having to go to the server to generate one (even if it's just for Chrome and FF).

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

Also, with my sample code above, as soon as you select the photo, the tab starts using about 32MB more of memory. That, I guess, is expected, but what concerns me is that the memory never seems to get freed by the garbage collector. So if I keep selecting more photos, I keep consuming more memory. I don't know if this is related to the crashing issue or not, but it's definitely a concern.

感谢您的帮助！

推荐答案

内存问题可能是此错误的结果：。本质上，Chrome会缓存data：URL，并且当 img.src 更改时，它当前不释放内存。另一个问题是数据：URL会对您编码的数据产生33％的开销。这意味着您实际上在图像上设置了大约3.85MB的资源，而不是2.9MB。

The memory issue could be a result of this bug: http://crbug.com/36142. Essentially, Chrome is caches data: URLs and currently does not release the memory when the img.src is changed. The other issue is that data: URLs yield a 33% overhead to the data you're encoding. That means you're actually setting a ~3.85MB resource on the image, not 2.9MB.

由于您不操纵内容（实际字节），因此不需要读取文件内容。一种选择是创建一个blob：url。还有一个明确的撤销方法，所以你不会遇到相同的内存缓存问题。例如：

Since you're not manipulating the content (the actual bytes), there's no need to read the file content. One option is to create a blob: url. There's also an explicit revoke method, so you won't run into the same memory caching issues. Something like:

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

这篇关于使用readAsDataURL加载选定图像时，HTML5 File API会导致Chrome崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！