HTML5 Canvas getImageData和Same Origin Policy [英] HTML5 Canvas getImageData and Same Origin Policy
问题描述
我有一个运行在pixie.strd6.com的网站和通过Amazon S3使用CNAME for images.pixie.strd6.com托管的图片。
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方法，但它会引发错误：SECURITY_ERR：DOM异常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 。来源 http://pixie.strd6.com 不允许由Access-Control-Allow-Origin。
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）。现在，您可以轻松地构建Web应用程序，使用JavaScript和HTML5与Amazon S3中的资源进行交互，从而实现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方法）将支持每个origin和其他操作特定的信息。您最多可以向配置添加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和Same Origin Policy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
