FileReader onload 仅在 Firefox 中第二次起作用？

Question

我正在使用 HTML5 进行浏览器内图像处理，并且在 Firefox 中使用 File API FileReader 类的 onload 事件处理程序（在 chrome 上正常工作）有一个奇怪的问题：文件仅在第二次正确处理它在表单中被选中。

知道如何让 Firefox 首次处理此事件吗？

Ps：我使用的是 Linux，也许这有关系？

JSFiddle：https://jsfiddle.net/ow126vah/

代码：

var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');

fileInput.addEventListener('change', function(e) {

  var file = fileInput.files[0];
  var imageType = /image.*/;

  if (file.type.match(imageType)) {

    var reader = new FileReader();

    reader.onload = function(e) {

      var ctx = fileDisplayArea.getContext("2d");

      // create a new image from user selected file
      var img = new Image();
      img.src = reader.result;

      // set canvas size to image size
      fileDisplayArea.width = img.width;
      fileDisplayArea.height = img.height;

      // scale and draw image with offset
      ctx.drawImage(img, 0, 0);
    }
    reader.readAsDataURL(file);
  } else {
    alert("File not supported!");
  }
})

<div>Select an image file:
  <input type="file" id="fileInput">
</div>
<canvas id="fileDisplayArea"></canvas>

Answer 1

问题不在于 FileReader。负载处理程序每​​次都会执行。问题似乎与访问图像的时间有关。等到加载完毕：

// create a new image from user selected file
var img = new Image();
img.onload = function() {
  // set canvas size to image size
  fileDisplayArea.width = img.width;
  fileDisplayArea.height = img.height;

  // scale and draw image with offset
  ctx.drawImage(img, 0, 0);
};
img.src = reader.result;

我认为它第二次可以工作，因为图像以一种或另一种方式缓存。

Answer 2

对于 Firefox，我们需要等待：

//ecouteur sur le chargement du reader
reader.onload = function(e) {

    var img = new Image();
    img.src = reader.result;

    //Attendre fin du chargement de l'image...
    setTimeout(function(){ my_action_to_modify_image;}, 500);//Increase this value if doesn't work
}