HTML5画布getImageData和同源策略

前端之家收集整理的这篇文章主要介绍了HTML5画布getImageData和同源策略前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个在pixie.strd6.com上运行的网站和通过Amazon S3托管的图像,其中包含一个CNAME for images.pixie.strd6.com.

我想能够将这些图像绘制到HTML5画布上,并调用getImageData方法,但会抛出错误:SECURITY_ERR:DOM异常18

我已经尝试设置window.domain =“pixie.strd6.com”,但这没有任何效果.

另外,$.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.

理想情况下,HTML5 canvas不会阻止从子域调用getImageData.我已经在S3中设计了一个Access-Control-Allow-Origin标头,但是还没有成功.

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

解决方法

Amazon recently announced CORS support

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.

How to enable 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相关文章