画布图像显示为无图像（空白）

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