畫布到圖像顯示為無圖像（空白）

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

看看你在做什么。 您正在加載圖像時繪制圖像，但是在繪制圖像之前將其轉換為數據網址！ 移動toDataURL調用， setAttribute調用INSIDE onload函數。

Answer 2

測試您發布的代碼，我收到了安全錯誤。 這是可以預料的。 畫布有一個clean-origin標志，一旦該標志為false，就無法從中提取數據。

這是一個更詳細的相關問題

答案中鏈接的文檔