javascript - 将 html5 画布保存为图像

Question

我正在尝试在具有背景图像的画布中获取 facebook 用户的图片。现在我想将我的画布默认保存为图像或单击按钮。我进行了深入的研究，我发现它可以通过使用它来完成

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

但我无法弄清楚如何让它与我的代码一起工作。我已经尝试了所有我能想到的可能性。它不工作。任何帮助将不胜感激。

Answer 1

从另一个域加载图像后，您不能在画布元素上使用 toDataUrl。这是HTML5 规范指定的安全问题

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

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

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