我在从HTML Canvas中显示URL中的图像时遇到问题

Question

As far as I can see my code is exactly like the code on W3schools except im making a new image instead of using one already in the html, but i cant get it to display anything 据我所见，我的代码与W3schools上的代码完全相同，只是我制作了一个新图像而不是在html中使用了一个新图像，但是我无法显示它来显示任何内容

<body>
<center><canvas id="myCanvas" width="1000" height="750"></canvas></center>
<script>
    function newImage(src, width, height) {
            var img = document.createElement("img");
            img.src = src;
            img.width = width;
            img.height = height;
            return img;
        }   

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var i = newImage("http://i.imgur.com/ELsS4mN.jpg", 1000, 750);
    ctx.drawImage(i,0,0);
</script>

Answer 1

The problem appears because you return image object before it is fully downloaded. 出现问题是因为您在完全下载图像对象之前将其返回。 Because of that canvas fails to render image data as background image. 因此，画布无法将图像数据呈现为背景图像。

You should make use of onload callback function and drawImage only when image data is completely available. 仅当图像数据完全可用时，才应使用onload回调函数和drawImage 。 This should work: 这应该工作：

function newImage(src, width, height, callback) {
    var img = new Image();
    img.width = width;
    img.height = height;
    img.onload = function () {
        callback(img);
    };
    img.src = src;
}

var c = document.getElementById("myCanvas"),
    ctx = c.getContext("2d");

newImage("http://i.imgur.com/ELsS4mN.jpg", 1000, 750, function(image) {
    ctx.drawImage(image, 0, 0);
});

Note how instead of returning image from newImage function, you pass callback function in it and invoke it once download complete. 请注意，如何在其中传递回调函数并在下载完成后调用它，而不是从newImage函数返回图像。

  function newImage(src, width, height, callback) { var img = new Image(); img.width = width; img.height = height; img.onload = function () { callback(img); }; img.src = src; } var c = document.getElementById("myCanvas"), ctx = c.getContext("2d"); newImage("http://i.imgur.com/ELsS4mN.jpg", 1000, 750, function(image) { ctx.drawImage(image, 0, 0); });

 <canvas id="myCanvas" width="1000" height="750"></canvas>

我在从HTML Canvas中显示URL中的图像时遇到问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-10-21 19:10:14

我在从HTML Canvas中显示URL中的图像时遇到问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-10-21 19:10:14

解决方案1
1 已采纳 2014-10-21 19:10:14