我无法在html5的canvas中获取图像，该怎么办？

我已经从我的w3schools检查了它的代码，其工作良好。我无法在html5的canvas中获取图像，该怎么办？

但是当我在浏览器中运行此代码时，它不起作用。

图像未显示在画布上。另外，我在其他地方的w3schools浏览器中尝试了相同的代码，但仍然无法在该浏览器中使用。

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

来源

2013-05-29 user2432288

你检查了基本知识吗？比如，与.htm文件位于同一文件夹中的图像。？ –

我会直接使用图像，而不是把它出了<img> -tag

var c = document.getElementById('myCanvas'); 
var ctx = canvas.getContext('2d'); 
var imageObj = new Image(); 

imageObj.onload = function() { 
     ctx.drawImage(imageObj, 10, 10); 
}; 
imageObj.src = 'flower.jpg';

来源

2013-05-29 12:11:27 irie

你可能需要在负载运行的JavaScript，而不是直接在身体的。改变你的JavaScript到这一点，它应该工作（至少它在this fiddle）：

function setup_canvas() { 
    var c=document.getElementById("myCanvas"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("scream"); 
    ctx.drawImage(img,10,10); 
} 

window.onload = setup_canvas;

此外，如this thread明确设定window.onload描述的是不是一个很好的做法，因为它可能会被后续的脚本被覆盖，因此除了测试以外，您还希望使用框架或addEventListener/attachEvent。

来源

2013-05-29 12:12:53 Simon

问题是，图像的加载是异步的，所以你的Javascript代码可能会在图像完成加载之前运行。因此，当ctx.drawImage(img, 10, 10)被称为img没有完整的数据，并在画布上绘制任何东西。

要解决您需要等待图像完全加载。 Javascript让你能够设置一个函数在图像完全加载时运行。

取决于图像数据的所有代码都应放在onload回调中。

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方法适用于两者。

来源

2013-05-29 13:05:28

我无法在html5的canvas中获取图像，该怎么办？

回答

相关问题