Question

我已经从我的w3schools检查了这段代码，它的运作良好。

但是当我在浏览器中运行此代码时，它无效。

图片未显示在画布中。另外，我在其他地方的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>

Answer 1

我会直接使用图片，而不是将其从<img> - 标记

中删除

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';

Answer 2

问题是图像的加载是异步的，因此您的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标记加载的，或者是在new Image()的Javascript中动态创建的，则onload方法适用于两者。

Answer 3

您可能需要在加载时运行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。

我无法在html5中获得画布中的图像，该怎么办？

3 个答案: