FileReader onload仅在Firefox中第二次运行？

Question

我正在使用HTML5进行浏览器内图像处理,并且在Firefox中使用文件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;

我认为它第二次工作,因为图像是以某种方式缓存的.