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 / 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;
});

它带我到一个空白页面？我在这里失踪了什么？

非常感谢你！

Answer 1

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

如果您拥有helphomelesscats.com，这应该可行，如此处测试

<强> Live Demo

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

使用图像导出画布作为图像（如PNG或jpg）

1 个答案: