javascript - FileReader onload only works the second time around in Firefox? - Stack Overflow

admin管理员组

文章数量:1410674

I'm working on in-browser image processing with HTML5 and have a weird issue in Firefox with the onload event handler for the File API FileReader class (which works properly on chrome): the file is only processed properly the second time it's selected in the form.

Any idea how I can get Firefox to process this event the first time around?

Ps: I'm using Linux, maybe that's relevant?

JSFiddle: /

Code:

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>

I'm working on in-browser image processing with HTML5 and have a weird issue in Firefox with the onload event handler for the File API FileReader class (which works properly on chrome): the file is only processed properly the second time it's selected in the form.

Any idea how I can get Firefox to process this event the first time around?

Ps: I'm using Linux, maybe that's relevant?

JSFiddle: https://jsfiddle/ow126vah/

Code:

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>

• javascript
• firefox
• dom

Share Follow edited May 25, 2015 at 16:00 Sebastian Bartos asked May 25, 2015 at 15:34 Sebastian BartosSebastian Bartos 2,51711 gold badge2121 silver badges2020 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

The problem is not with FileReader. The load handler gets executed every time. The problem seems to be with the timing of accessing the image. Wait until it is loaded:

// 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;

I assume it works the second time because the image is cached one way or the other.

for Firefox we need to wait :

//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
}

本文标签： javascriptFileReader onload only works the second time around in FirefoxStack Overflow