HTML5 Canvas getImageData和Same Origin Policy

Question

我有一个运行在pixie.strd6.com的网站,图像通过Amazon S3托管,图像为CNAME for images.pixie.strd6.com.

我希望能够将这些图像绘制到HTML5画布并调用getImageData方法,但它会抛出 Error: SECURITY_ERR: DOM Exception 18

我尝试过设置window.domain = "pixie.strd6.com",但这没有效果.

此外,$.get("http://dev.pixie.strd6.com/sprites/8516/thumb.png?1293830982", function(data) {console.log(data)})还会抛出一个错误: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标头,但是没有成功.

非常感谢任何帮助或解决方法.

Answer 1

亚马逊最近宣布了CORS支持

我们很高兴地宣布支持Amazon S3中的跨源资源共享(CORS).您现在可以轻松构建使用JavaScript和HTML5与Amazon S3中的资源交互的Web应用程序,从而实现HTML5拖放上传到Amazon S3,显示上载进度或更新内容.到目前为止,您需要在Web应用程序和Amazon S3之间运行自定义代理服务器以支持这些功能.

如何启用CORS

要配置存储桶以允许跨源请求,您需要创建一个CORS配置,一个XML文档,其中包含用于标识允许访问存储桶的起源的规则,操作(HTTP方法)将支持每个源,以及其他操作-具体信息.您最多可以为配置添加100条规则.您将XML文档作为cors子资源添加到存储桶.