畫布圖像顯示爲無圖像（空白）

Question

我正在使用dataurl將畫布轉換爲圖像。我有以下代碼在控制檯中輸出沒有錯誤。似乎有點工作，但是當我訪問dataurl它顯示一個空白圖像。

window.onload = function() { 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var imageObj = new Image(); 

    imageObj.onload = function() { 
     var myImage = context.drawImage(imageObj, 0, 0);   
     var myImg = canvas.toDataURL("image/png"); 
     document.getElementById("canvasimg").setAttribute("src", myImg); 
    }; 
    imageObj.src = "http://img801.imageshack.us/img801/5641/3cc67ca1a74049ce99bc92b.png"; 
}; 

<canvas id="myCanvas" width="578" height="400"></canvas> 
<img id="canvasimg" alt="" src=""> 

Answer 1

看看你在做什麼。您在圖像加載時繪製圖像，但是在繪製圖像之前將其轉換爲數據url！移動toDataURL呼叫和setAttribute呼叫INSIDE onload功能。

Answer 2

測試您發佈的代碼，我得到一個安全錯誤提出。這是可以預料的。畫布上有一個乾淨的標誌，一旦該標誌爲false，就不能從中拉出數據。

這裏有一個更詳細的，相關question

Documentation linked to in the answer