HTML5 Canvas getImageData和同源策略

Question

我有一个运行在pixie.strd6.com上的网站和通过亚马逊S3托管的图片，其中包含images.pixie.strd6.com的CNAME。

我希望能够将这些图像绘制到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 canvas不会阻止从子域调用getImageData。我已经研究过在S3中设置访问控制允许原始头，但没有成功。

任何帮助或变通方法都是非常感谢的。

Answer 1

Amazon recently announced CORS support

我们很高兴地宣布在亚马逊S3中支持跨域资源共享(CORS)。现在，您可以轻松构建使用JavaScript和HTML5与亚马逊S3中的资源进行交互的web应用程序，从而使您能够实现HTML5拖放上传到亚马逊S3、显示上传进度或更新内容。到目前为止，你需要在你的web应用程序和亚马逊S3之间运行一个定制的代理服务器来支持这些功能。

How to enable CORS

要将存储桶配置为允许跨域请求，您需要创建一个CORS配置、一个包含规则的

文档，这些规则标识您将允许访问存储桶的源、每个源将支持的操作(HTTP方法)以及其他特定于操作的信息。最多可以向配置中添加100条规则。将XML文档作为cors子资源添加到存储桶中。

Answer 2

一种可能的解决方案是使用nginx作为代理。下面是如何配置去往http://pixie.strd6.com/s3/的urls以传递到S3，但是浏览器仍然可以相信它是非跨域的。

location /s3/ {
  proxy_pass http://images.pixie.strd6.com/;
}

Answer 3

如果您使用的是PHP，则可以执行以下操作：

    function fileExists($path){
        return (@fopen($path,"r")==true);
    }
    $ext = explode('.','https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg');
    if(fileExists('https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg')){
        $contents = file_get_contents('https://cgdev-originals.s3.amazonaws.com/fp9emn.jpg');
        header('Content-type: image/'.end($ext));
        echo $contents;
    }

并通过使用该php文件访问图像，例如，如果文件名为generateImage.php，则可以执行<img src="http://GENERATEPHPLOCATION/generateImage.php"/>操作，外部图像url可以是该文件的get参数