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

Question

据我所见，我的代码与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

出现问题是因为您在完全下载图像对象之前将其返回。 因此，画布无法将图像数据呈现为背景图像。

仅当图像数据完全可用时，才应使用onload回调函数和drawImage 。 这应该工作：

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);
});

请注意，如何在其中传递回调函数并在下载完成后调用它，而不是从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