javascript - Canvas 中图像的 CORS 设置

Question

我尝试使用 Caman.js 并从 Amazon S3 加载图像。 Caman.js 是一个用于生成图像效果的 JS 库，它通过将图像复制到 Canvas 对象并对数据进行各种像素操作来工作。看起来 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 

您需要在您的亚马逊存储桶上设置一个 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 文档，但似乎找不到任何好的答案。以前有人处理过这个问题吗？

谢谢! 凯文

更新:这是我从对亚马逊的图像请求中获得的响应 header :

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 canvas 问题的人。

Amazon S3 仅在明确要求 (see CORS specs) 时才会发送 Cross-Origin header 。这意味着客户端必须在 HTTP 请求中明确要求它们。预期的行为是客户端将在请求中的 "Origin: host-name" header 内指定主机名，服务器将检查它是否应该与特定来源名称共享资源.重要的是要了解这里，如果您的客户端是 Web 浏览器，它不会无缘无故地发送此 header 。

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

图片: HTML5 在 HTML 标签和 Javascript 中添加了对图像的跨源支持...在图像上使用 crossOrigin 属性，浏览器会将资源作为跨源资源获取(它将添加 HTTP 请求的 Origin header )link to the original post .

The crossorigin attribute is a CORS settings attribute. Its purpose is to allow images from third-party sites that allow cross-origin access to be used with canvas.

read more on MDN

我也遇到了类似的问题，如果您可以在客户端依赖 HTML5 支持，请使用该解决方案!