我無法在html5的canvas中獲取圖像，該怎麼辦？

我已經從我的w3schools檢查了它的代碼，其工作良好。我無法在html5的canvas中獲取圖像，該怎麼辦？

但是當我在瀏覽器中運行此代碼時，它不起作用。

圖像未顯示在畫布上。另外，我在其他地方的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>

來源

2013-05-29 user2432288

你檢查了基本知識嗎？比如，與.htm文件位於同一文件夾中的圖像。？ –

我會直接使用圖像，而不是把它出了<img> -tag

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

來源

2013-05-29 12:11:27 irie

你可能需要在負載運行的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。

來源

2013-05-29 12:12:53 Simon

問題是，圖像的加載是異步的，所以你的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標籤加載或在Javascript中動態創建與new Image()不要緊，該onload方法適用於兩者。

來源

2013-05-29 13:05:28

我無法在html5的canvas中獲取圖像，該怎麼辦？

回答

相關問題