FileReader onload работает только во второй раз в Firefox?

Question

Я работаю над обработкой изображений в браузере с помощью HTML5 и имею странную проблему в Firefox с обработчиком событий onload для класса File File Fileer (который работает правильно на chrome): файл обрабатывается должным образом во второй раз выбранных в форме.

Любая идея, как я могу заставить Firefox обрабатывать это событие в первый раз?

Пс: Я использую 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 
}