我在HTML画布中显示URL中的图像时遇到问题

Im having an issue displaying a image from a URL in HTML Canvas

本文关键字：图像 遇到 问题 URL HTML 布中 显示 我在      更新时间：2023-09-26

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

问题出现是因为您在图像对象完全下载之前返回了它。因为画布无法将图像数据渲染为背景图像。

只有当图像数据完全可用时，才应使用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>

相关文章：