导出画布与图像作为图像（如PNG或JPG）

Question

我只是基本上想要得到我的“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 /体这样的：

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

现在，如果你尝试，那工作正常。它表明那只猫。

但是当我添加到DataURL到我的脚本，它只是不会发生。

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

我这个dataImg变量装入另一个点击重定向功能进行测试，希望它能使用的base64 URL包含重定向到网页，但它只是不工作：

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

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

非常感谢你！

Answer 1

您是否拥有http://www.helpinghomelesscats.com或者是否直接在该网站上托管代码？如果没有，您将无法做到这一点，因为跨网站的来源政策。最好的办法是让一些服务器端代码获取图像，然后在您的域上本地提供。

如果你自己helpinghomelesscats.com这应该工作，因为这里

Live Demo

测试点击画布，查看日志，以查看响应。