HTML5 Canvas getImageData 和同源策略 [英] HTML5 Canvas getImageData and Same Origin Policy
问题描述
我有一个在 pixie.strd6.com 上运行的网站，并通过 Amazon S3 托管图像，并为 images.pixie.strd6.com 使用 CNAME.
I have a site running at pixie.strd6.com and images hosted through Amazon S3 with a CNAME for images.pixie.strd6.com.
我希望能够将这些图像绘制到 HTML5 画布并调用 getImageData 方法，但它会抛出 Error: SECURITY_ERR: DOM Exception 18
I would like to be able to draw these images to an HTML5 canvas and call the getImageData method but it throws Error: SECURITY_ERR: DOM Exception 18
我尝试设置 window.domain = "pixie.strd6.com"，但没有效果.
I have tried setting window.domain = "pixie.strd6.com", but that has no effect.
另外，$.get("http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982", function(data) {console.log(data)}) 也会引发错误:XMLHttpRequest 无法加载 http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982.Access-Control-Allow-Origin 不允许使用 http://pixie.strd6.com.
Additionally, $.get("http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982", function(data) {console.log(data)}) also throws an error: XMLHttpRequest cannot load http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982. Origin http://pixie.strd6.com is not allowed by Access-Control-Allow-Origin.
理想情况下，HTML5 画布不会阻止从子域调用 getImageData.我研究过在 S3 中设置 Access-Control-Allow-Origin 标头，但没有成功.
Ideally HTML5 canvas wouldn't block calling getImageData from subdomains. I've looked into setting an Access-Control-Allow-Origin header in S3, but haven't succeeded.
非常感谢任何帮助或解决方法.
Any help or workarounds are greatly appreciated.
推荐答案
我们很高兴地宣布支持 Amazon S3 中的跨源资源共享 (CORS).您现在可以轻松构建使用 JavaScript 和 HTML5 与 Amazon S3 中的资源交互的 Web 应用程序，使您能够实施 HTML5 拖放上传到 Amazon S3、显示上传进度或更新内容.到目前为止，您需要在 Web 应用程序和 Amazon S3 之间运行自定义代理服务器来支持这些功能.
We're delighted to announce support for Cross-Origin Resource Sharing (CORS) in Amazon S3. You can now easily build web applications that use JavaScript and HTML5 to interact with resources in Amazon S3, enabling you to implement HTML5 drag and drop uploads to Amazon S3, show upload progress, or update content. Until now, you needed to run a custom proxy server between your web application and Amazon S3 to support these capabilities.
要配置您的存储桶以允许跨源请求，您需要创建一个 CORS 配置，一个带有规则的 XML 文档，用于标识您将允许访问您的存储桶的源，操作(HTTP 方法)将支持每个源，和其他特定于操作的信息.您最多可以向配置中添加 100 条规则.您将 XML 文档作为 cors 子资源添加到存储桶中.
To configure your bucket to allow cross-origin requests, you create a CORS configuration, an XML document with rules that identify the origins that you will allow to access your bucket, the operations (HTTP methods) will support for each origin, and other operation-specific information. You can add up to 100 rules to the configuration. You add the XML document as the cors subresource to the bucket.
这篇关于HTML5 Canvas getImageData 和同源策略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
