画布toDataURL()给出空白图像

时间:2013-09-29 02:00:40

标签: javascript html5 canvas

我是JS的初学者,我只是在玩HTML5。在试验期间,我遇到了这个问题。我有这样的事情:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript">
            function graph() {
                // ...stuff that draws to canvas, verified "working"...
                var downloadLink = document.getElementById("myCanvas").toDataURL();
                $("#dlLink").attr("href", downloadLink);
            }
            $(window).load(function() {
                graph();
            });
        </script>
    </head>
    <body>
        <div class="container">
            <h1 style = ";padding-bottom:30px;"><a href="#">Tool</a></h1>
            <canvas id="myCanvas" width="400" height="400"></canvas>
            <a href="#" id="dlLink">Download</a>
        </div>
    </body>
</html>

当我点击带有base64编码的下载链接时,我得到一张空白图片。任何人都可以揭露为什么会这样吗?看起来链接是在画布上有任何内容之前生成的,但我无法确定。

2 个答案:

答案 0 :(得分:2)

相反,试试这个:

$("#dlLink").click(function(){
    var win=window.open();
    win.document.write("<img src='"+document.getElementById("myCanvas").toDataURL()+"'/>");
});

答案 1 :(得分:0)

尝试向toDataURL传递类似&#34; image / png&#34;的内容类型。或&#34; image / jpeg&#34;。 (canvas.toDataURL("image/png"));