logo标签列表

Canvas toDataURL() 函数返回空白图片

javascripthtmlcanvas
4

我完全是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个回答
3
相反，试试这个：
$("#dlLink").click(function(){
    var win=window.open();
    win.document.write("<img src='"+document.getElementById("myCanvas").toDataURL()+"'/>");
});
您可以直接将DataURI放入<img>标签中。 - Derek 朕會功夫
1
不用谢！上述代码将在各种浏览器中正常工作。将锚点的 href 属性设置为 canvas.toDataURL 将会在各种浏览器中产生不一致的结果（在 Chrome 中良好，在 Firefox 中有些奇怪，在 IE 中不好）。示例：document.getElementById("dlLink").href=document.getElementById("myCanvas").toDataURL()。 - markE
0
尝试将 toDataURL 传递一个像 "image/png" 或 "image/jpeg" 这样的内容类型。（canvas.toDataURL("image/png")）；
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接