画布中图像的CORS设置

Question

我试图使用Caman.js并从Amazon S3加载图像.Caman.js是一个用于生成图像效果的JS库,它通过将一个图像副本创建到画布对象并对数据进行各种像素处理来工作.看起来canvas有一些安全细节来限制javascript访问像素数据的能力,当数据来自外部服务器时,除非该服务器传递请求中的某些安全凭证,或者跨源资源共享(CORS) ).

我之前从未遇到过CORS,我试图了解它,但我似乎无法让它工作.根据我的理解,为了避免Chrome中出现此错误:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18 

您需要在Amazon存储桶上设置CORS文件.这是我正在使用的CORS文件:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

这似乎没有任何影响.这些CORS文件是由亚马逊缓存还是我希望它立即生效？ - 更新:我试过8小时后仍然没有工作,所以我认为缓存不是问题.

看起来上面指定的CORS文件应该允许一切通过,不是吗？我查看了CORS和Google上的Chrome文档,但我似乎无法找到任何好的答案.有没有人以前处理过这个问题？

谢谢!凯文

更新:这是我从图像请求到亚马逊的响应标题:

Date:Thu, 18 Oct 2012 04:52:40 GMT
ETag:"9848ce610c994521295d8aa38b47bab9"
Last-Modified:Thu, 18 Oct 2012 04:19:45 GMT
Server:AmazonS3
x-amz-id-2:Govue0tJg5MLYedr/l7T2RU5RApXLZBwJ8p507hS+sLGqxYojRnVKqj4jRHRZsZ6
x-amz-request-id:F4FF5B669C3156D2

Answer 1

虽然这是一个4个月大的问题,但我想通过在此处提供对工作解决方案的引用来帮助其他人获取S3,CORS和HTML画布问题.

只有在明确要求的情况下,Amazon S3才会发送Cross-Origin标头(请参阅CORS规范).这意味着客户端必须在HTTP请求中明确地询问它们.预期的行为是客户端将在请求中的"Origin:host-name"标头内指定主机名,服务器将检查它是否应该与特定的源名称共享资源.重要的是要理解这里,如果您的客户端是Web浏览器,它将不会无缘无故地发送此标头.

这是跨域ajax请求的工作方式.最近为字体和图像等其他资源添加了支持.

图像: HTML5为HTML标签和Javascript中的图像添加了Cross-Origin支持... 在图像上使用crossOrigin属性,浏览器将获取资源作为跨源资源(它将Origin头添加到HTTP请求)链接到原来的帖子.

该crossorigin属性是CORS设置属性.其目的是允许来自允许跨源访问的第三方站点的图像与canvas一起使用.

在MDN上阅读更多内容

我也提出了类似的问题,如果你可以依赖客户端的HTML5支持,那就使用那个解决方案吧!