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调用onload功能。

Answer 2

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

以下是更详细的相关question

Documentation linked to in the answer

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

2 个答案: