在 canvas 中绘制全尺寸图像仅适用于 Mozilla Firefox 中的第二次尝试

Question

我正在尝试从用户那里获取图像并在其中绘制内容。但是我在 MF 中出现奇怪的行为，只在 canvas 中显示完整尺寸的图像。我有以下代码：

<!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>

在 Chrome 和 Opera 中，一切正常，但在 Mozilla Firefox 中，当我选择图像时没有任何反应，添加的 canvas 的宽度为 0，高度为 0。然后如果我重新 select 它会再次出现，因此对于每张图片，我必须 select 它一次，没有任何反应，然后在第二次、第三次等时一切正常。
为什么这是在发生吗？

Answer 1

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

在 canvas 中绘制全尺寸图像仅适用于 Mozilla Firefox 中的第二次尝试

Drawing an image in its full size in a canvas works only on the second try in Mozilla Firefox

javascript

html

firefox

canvas

filereader