我正在尝试从用户那里获取图像并在其中绘制内容。但我在 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。然后，如果我再次重新选择它，它将显示出来，因此对于每个图像，我必须选择它一次，没有任何反应，然后在第二次、第三次等次时一切正常。
为什么会发生这种情况？
最佳答案
我会尝试在 img.onload 回调中在 Canvas 上绘制图像。
关于javascript - 在 Canvas 中绘制完整尺寸的图像仅在 Mozilla Firefox 中第二次尝试时有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28901554/