将html5画布保存为图像

Question

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

来完成

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

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

Answer 1

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

指定的安全问题

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

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

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