画布toDataURL（）提供空白图片
[英]Canvas toDataURL() giving blank image
问题描述
I'm a complete beginner to JS and I'm just playing around with HTML5. 
我是JS的完整入门者，并且正在使用HTML5。 While experimenting, I came across this issue. 在尝试时，我遇到了这个问题。 I have something like this: 我有这样的事情：
<!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>
When I click the download link with the base64 encoding, I get a blank image. 单击带有base64编码的下载链接时，出现空白图像。 Can anyone bring to light why this is happening? 任何人都可以揭露为什么会这样吗？ It seems like the link is generated before the canvas has anything on it, but I can't be sure. 似乎链接是在画布上包含任何内容之前生成的，但是我不确定。
2 个解决方案
解决方案1
2 已采纳 2013-09-29 02:22:47
Instead, try this: 相反，请尝试以下操作：
$("#dlLink").click(function(){
var win=window.open();
win.document.write("<img src='"+document.getElementById("myCanvas").toDataURL()+"'/>");
});
解决方案2
0 2013-09-29 02:15:52
Try passing toDataURL a content type like "image/png" or "image/jpeg". 尝试将诸如“ image / png”或“ image / jpeg”的内容类型传递给DataURL。 ( canvas.toDataURL("image/png") ); （ canvas.toDataURL("image/png") ）;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.