Javascript 只有在Mozilla Firefox中进行第二次尝试后，才能在画布上绘制完整大小的图像_Javascript_Html_Firefox_Canvas_Filereader

Javascript 只有在Mozilla Firefox中进行第二次尝试后，才能在画布上绘制完整大小的图像

javascript html firefox canvas

Javascript 只有在Mozilla Firefox中进行第二次尝试后，才能在画布上绘制完整大小的图像,javascript,html,firefox,canvas,filereader,Javascript,Html,Firefox,Canvas,Filereader,我试着从用户那里获取图像，然后把它们画进去。但我在MF中有了奇怪的行为，只在画布上显示完整尺寸的图像。我有以下代码： <!DOCTYPE html> <html> <body> <input type="file" id="input"> <div id="main"></div> <script> document.getElementById('input').onchange = fu

我试着从用户那里获取图像，然后把它们画进去。但我在MF中有了奇怪的行为，只在画布上显示完整尺寸的图像。我有以下代码：

<!DOCTYPE html>
<html>
 <body>
  <input type="file" id="input">
  <div id="main"></div>
  <script>
   document.getElementById('input').onchange = function() {
    var file_reader = new FileReader();
    file_reader.onload = function() {
     var img = new Image();
     img.src = file_reader.result;

     var canvas = document.createElement('canvas');
     canvas.width = img.width;
     canvas.height = img.height;

     var ctx = canvas.getContext('2d');
     ctx.drawImage(img, 0, 0, img.width, img.height)

     document.getElementById('main').appendChild(canvas)
    }
    file_reader.readAsDataURL(document.getElementById('input').files[0])
   }
  </script>
 </body>
</html>


document.getElementById（'input'）。onchange=function（）{
var file_reader=new FileReader（）；
file_reader.onload=函数（）{
var img=新图像（）；
img.src=文件\u reader.result；
var canvas=document.createElement（'canvas'）；
canvas.width=img.width；
canvas.height=img.height；
var ctx=canvas.getContext（'2d'）；
ctx.drawImage（图像，0，0，图像宽度，图像高度）
document.getElementById（'main'）.appendChild（画布）
}
文件\u reader.readAsDataURL（document.getElementById（'input'）。文件[0]）
}

在Chrome和Opera中，一切正常，但在Mozilla Firefox中，当我选择图像时，什么也不会发生，添加的画布的宽度为0，高度为0。然后，如果我再次选择它，它会显示出来，因此对于每个图像，我必须选择一次，什么都不会发生，然后在第二次、第三次等时间，一切都正常。
为什么会发生这种情况？

我会尝试在img.onload回调中在画布上绘制图像