将带有图像的画布导出为图像（如 PNG 或 jpg）答案

【问题标题】：Export Canvas WITH an image AS an image (like PNG or jpg)将带有图像的画布导出为图像（如 PNG 或 jpg）
【发布时间】：2012-09-05 17:45:01
【问题描述】：

我基本上只是想将画布的“http://....png”或“http://....jpg”位置作为图像。

我已经尝试过 toDataURL() 但它不起作用。尤其是当我在画布中加载图像时。

这是我的代码：（顺便说一句，我在这里使用 jQuery）

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
 var canvas = $("#canvas");
 var ctx = canvas.get(0).getContext("2d");

 var image1 = new Image();
 image1.src = "http://www.helpinghomelesscats.com/images/cat1.jpg"
 $(image1).load(function(){
   ctx.drawImage(image1,0,0,200,200);
 });

});
</script>

我的 html/body 只有这个：

<canvas id="canvas" width="500" height="400"></canvas>

现在，如果您尝试这样做，效果很好。它显示了那只猫。

但是当我将 toDataURL 添加到我的脚本中时，它就不会发生。

var dataImg = canvas.get(0).toDataURL();

我将这个 dataImg 变量加载到另一个点击重定向函数中来测试它，希望它会使用它包含的 base64 url 重定向到页面，但它只是不起作用：

$("#canvas").click(function(){
  document.location = dataImg;
});

它把我带到一个空白页？我在这里错过了什么？

非常感谢！

【问题讨论】：

标签： image html canvas export

【解决方案1】：

您拥有http://www.helpinghomelesscats.com 还是您的代码直接托管在该站点上？如果不是，由于跨站点源策略，您将无法执行此操作。最好的方法是让一些服务器端代码抓取图像，然后在您的域中本地提供它。

如果您拥有helphomelesscats.com，这应该可以工作，正如这里测试的那样

Live Demo

单击画布并查看日志以查看响应。

【讨论】：