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

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

测试您发布的代码，我收到了一个安全错误。这是可以预料的。画布有一个 clean-origin 标志，一旦该标志为假，您就无法从中提取数据。

这是一个更详细的相关问题

答案中链接到的文档

Answer 2

看看你在做什么。您在图像加载时绘制图像，但在图像绘制之前将其转换为数据 url！移动那个toDataURL调用和setAttribute调用内部的onload函数。