我在從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