Question

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

我知道如何让Firefox第一次处理此事件？

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

代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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
}

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

2 个答案: