Javascript 正在尝试从文件目录加载画布图像_Javascript_Html_Canvas

Javascript 正在尝试从文件目录加载画布图像

javascript html canvas

Javascript 正在尝试从文件目录加载画布图像,javascript,html,canvas,Javascript,Html,Canvas,我发现这个JSFIDLE的工作原理和我需要的完全一样。一直在搜索示例，并学习了几本html5画布在线教程。我正在尝试将从目录中的许多图像中选择的几个图像加载到一个html5画布。我尝试使用JSFIDLE编写了以下代码： <!DOCTYPE html> <html> <HEAD> <script type="text/javascript"> var input = document.getElementById('input'); inp

我发现这个JSFIDLE的工作原理和我需要的完全一样。一直在搜索示例，并学习了几本html5画布在线教程。我正在尝试将从目录中的许多图像中选择的几个图像加载到一个html5画布。我尝试使用JSFIDLE编写了以下代码：

<!DOCTYPE html>
<html>
  <HEAD>
 <script type="text/javascript">
var input = document.getElementById('input');

input.addEventListener('click', handleFiles);
var i=0;
function handleFiles(e) {alert("here");

    var ctx = document.getElementById('canvas').getContext('2d');

    var img = new Image;
    alert("hello");
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function() {
        ctx.drawImage(img, 20,20);
        alert('the image is drawn');

    }
}
  </script>

  </head>
  <Body >

<h1>Test</h1>
<input type="file" id="input"/>
<canvas width="800" height="500" id="canvas"/>

</body>
</html>


var input=document.getElementById（'input'）；
input.addEventListener（'click'，HandleFile）；
var i=0；
函数handleFiles（e）{alert（“here”）；
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
var img=新图像；
警惕（“你好”）；
img.src=URL.createObjectURL（e.target.files[0]）；
img.onload=函数（）{
ctx.drawImage（img，20,20）；
警报（“图像已绘制”）；
}
}
试验

上述内容在我的chrome或firefox上不起作用。它似乎正确地显示初始页面，但图像不显示在画布中

我想我可能有安全问题，或者需要用onload来包装它。我不太理解onload函数的语法。 js控制台表示没有错误

感谢您的帮助

Tim

您可以通过将

multiple

属性添加到

输入中来选择多个图像
<input type="file" multiple id="input"/>




只需在设置src
之前先添加onload
侦听器，因为设置src
会触发onload
@EdwinReynoso，在src
之前放置onload
是一个很好的预防措施，但实际上很少有映像在映像之前异步完成加载。onload
行被读取。Idk您认为在哪里很少？这完全取决于图像的加载时间，因为图像是异步加载的，这就是保证onload
启动的方式，是的，如果图像很大并且需要一段时间，则在加载图像之前读取onload事件。它是onload
所以是的，一旦图像实际加载，那么再次，如果需要一段时间，那么是的。但是添加onload
保证了它会感谢代码示例！！我会好好玩玩的。