我无法在HTML5中的画布中获得图像，该怎么办？ [英] I'm unable to get image in canvas in html5, what to do?
问题描述
但是，当我在浏览器中运行此代码时，它无法正常工作。
图像未显示在画布中。此外，我在其他地方的w3schools浏览器中尝试了相同的代码，但仍然无法在该浏览器中使用。
< ;! DOCTYPE html>
< html>
< body>
< p>要使用的图片：< / p>
< img id =screamsrc =flower.jpgalt =The Screamwidth =220height =277>< p>画布：< / p>
< canvas id =myCanvaswidth =250height =300style =border：1px solid＃d3d3d3;>
< script>
var c = document.getElementById（myCanvas）;
var ctx = c.getContext（2d）;
var img = document.getElementById（scream）;
ctx.drawImage（img，10,10）;
< / script>
< / body>
< / html>
问题是图像的加载是异步的，所以你的Javascript代码可能会在图像完成加载之前运行。因此，当 ctx.drawImage（img，10，10）被称为 img 时，没有完整的数据，在画布上。
要解决此问题，您需要等待图像完全加载。所有代码都依赖于图像数据，应该放在<$ c $内部。 c> onload callback。
img.onload = function（）{
ctx。的drawImage（IMG，10,10）;
}
您的带有修改部分的脚本：
< script>
var c = document.getElementById（myCanvas）;
var ctx = c.getContext（2d）;
var img = document.getElementById（scream）;
img.onload = function（）{
ctx.drawImage（img，10,10）;
}
< / script>
如果 src 是正确的如果图像是从html标记加载的，或者在Javascript中使用 new Image（）， onload 方法适用于两者。
I have checked this code from my w3schools where its working well.
But when I run this code in my browser, it's not working.
The image does not get displayed in the canvas. Also, I tried the same code in w3schools browser somewhere else, but still it's not working in that browser either.
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="flower.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
</script>
</body>
</html>
The problem is that load of an image is asynchronous, so your Javascript code might run before the image finish his loading. Because of that when ctx.drawImage(img, 10, 10) is called img have no complete data and draws nothing on canvas.
To solve that you need to wait the image to completely load. Javascript give you the ability to setup a function to run when an image is completely loaded.
All code that depends of the image data should be put inside the onload callback.
img.onload = function(){
ctx.drawImage(img,10,10);
}
Your script with the modified parts:
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function(){
ctx.drawImage(img,10,10);
}
</script>
If the src is correct doesn't matter if the image is loaded from a html tag or created dynamically in Javascript with new Image(), the onload method works for both.
这篇关于我无法在HTML5中的画布中获得图像，该怎么办？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
