javascript - 我如何从另一个网站获得 "getImageData"？安全错误 : DOM Exception 18

Question

我正在开发一个在线应用程序来处理图像。使用本地文件(在服务器上)时它工作正常，但一旦我尝试使用另一个源它就会中断。原因似乎是安全限制，引用自 whatwg :

Whenever the getImageData() method of the 2D context of a canvas element whose origin-clean flag is set to false is called with otherwise correct arguments, the method must raise a SECURITY_ERR exception.

所以我想知道我能以某种方式解决这个问题吗？图片将全部来自谷歌 API，如果可以的话，我真的想跳过保存图片。

谢谢。

Answer 1

由于您可能无法访问从中提取源图像的​​服务器，因此最好的办法是通过您的服务器代理文件。

本质上，您向您的服务器发送一个 AJAX 请求，其中包含您要从中获取数据的图像的 URL。您的服务器收到请求并代表您请求图像。当它获得文件时，它会对其进行 base64 编码并将数据发回给您。由于图像数据只是一个字符串，您可以从中创建一个图像对象并通过 canvas 对其进行操作，而无需担心原始域。

如果您愿意使用 jQuery，这里有一个很棒的插件可以做到这一点:http://www.maxnov.com/getimagedata/

我以前使用过这个特别的插件并取得了很好的效果。我会注意到您应该(必须)在自己的服务器上托管代理服务器代码。您可以使用作者的 appspot 帐户，但它每天只能查询一定数量并且经常用完。作者在这里解释了如何自己托管代理代码:http://www.maxnov.com/getimagedata/#using-your-own-server