画布中图像的 CORS 设置

Posted 2023-03-04

技术标签:

【中文标题】画布中图像的 CORS 设置【英文标题】：CORS settings for images in canvas 【发布时间】：2012-10-08 11:32:29 【问题描述】：

我尝试使用 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

【问题讨论】：

你能用 s3 的响应头更新你的问题吗？旧浏览器不支持 CORS 您是获取图像作为响应还是一些 xml。您可以在 chrome network tav 中看到响应在“预览”选项卡下，我看到了图像，Mime 类型为“application/octet-stream”。在“响应”下，我得到“此请求没有可用的响应数据。” 遇到同样的问题。 CORS 标头未显示在响应中。你能解决这个问题 scottlabs 吗？贾弗，不。我的解决方案是通过我的后端读取图像并在本地将它们吐出，这样我就可以解决它。不过绝对不理想。 【参考方案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 设置属性。它的目的是允许来自允许跨域访问的第三方网站的图像 与画布一起使用。