只有在Mozilla Firefox中第二次尝试时，才能在画布上绘制全尺寸图像

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

本文关键字：绘制 图像 全尺寸 Firefox Mozilla 第二次      更新时间：2023-09-26

我正在尝试从用户那里获取图像并在其中绘制内容。但我在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>

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

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

相关文章：