1

我基本上只是想将画布的“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;
});

它把我带到一个空白页？我在这里想念什么？

非常感谢！

4

1 回答 1

1

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

如果您确实拥有helphomelesscats.com，这应该可以工作，如此处测试

现场演示

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

于 2012-09-12T16:52:18.923 回答