画布中图像的 CORS 设置

Question

我尝试使用 Caman.js 并从 Amazon S3 加载图像。 Caman.js 是一个用于生成图像效果的 JS 库，它通过将图像副本创建到画布对象并对数据进行各种像素操作来工作。看起来画布有一些安全细节来限制 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 文件是由 Amazon 缓存的，还是我应该期望它立即生效？ -- 更新：我在 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 仅在明确要求 (see CORS specs) 时才会发送 Cross-Origin 标头。这意味着客户端必须在 HTTP 请求中明确要求它们。预期的行为是客户端将在请求的 "Origin: host-name" 标头中指定主机名，并且服务器将检查它是否应该与特定的源名共享资源.这里重要的是要了解，如果您的客户端是 Web 浏览器，它不会无缘无故发送此标头。

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

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

crossorigin 属性是 CORS 设置属性。它的目的是 允许来自允许跨域访问的第三方网站的图像 与画布一起使用。

read more on MDN

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