将html5画布保存为图像

时间:2013-01-26 15:46:16

标签: javascript html5 html5-canvas

我试图在我的画布中获取facebook用户的照片,其中有一个背景图片。现在我想默认或按一下按钮将我的画布保存为图像。我有彻底的研究,我发现它将通过使用此

来完成
var myImage = canvas1.toDataURL("image/png");
imageElement.src = myImage;     

但我无法弄清楚如何使用我的代码。我已经尝试了所有可以想到的可能性。它不起作用。任何帮助都将非常感激。

1 个答案:

答案 0 :(得分:1)

从其他域加载图像后,不能在canvas元素上使用toDataUrl。这是HTML5 spec

指定的安全问题

解决此问题的一种方法是,如果您可以控制服务器 提供 图像,则可以使用access-control-allow-origin标头为其提供服务。您可以在此处详细了解:http://www.w3.org/TR/cors/#use-cases

另一种选择是代理服务器中的图像,从而代理您的域。而不是询问给定网址中的图片,你的js代码会调用服务器上的脚本来获取图像并将其提供给你。

在你的情况下,你试图从Facebook抓取图像,显然不会发送这些标题,因为这将是一个巨大的安全问题。您将不得不求助于服务器端代理解决方案。