canvas - 我应该将 CORS 设置设置为什么以及在哪里设置，这样我的 Canvas 就不会被污染？

Question

我有一个大 Canvas ，其中包含所有来 self 的 S3 存储桶的图标和图片。当我尝试上传它(运行 toDataUrl)时，Chrome 提示

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

我以前遇到过这个错误，但当时我的解决方案是将所有图像托管在本地。然而，这一次是不可能的，所以我需要正面解决这个问题。

谷歌搜索这个问题，发现了很多关于 CORS 的内容，但我不明白。

我已在 S3 存储桶中尝试了以下设置:

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

但是，这不起作用。

我的直觉告诉我我还必须更改服务器中的某些内容，否则此安全要求的目的是什么？

那么我应该改变什么，以及哪里，这样我的 Canvas 就不会再被污染了？

Answer 1

您的 CORS 配置应该良好，最少需要的是

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

但是，您需要的是设置您的 <img>的 crossOrigin attribute至"anonymous" .

此外，检查 s3 上的图像是否已公开(应该将受让人 Everyone 设置为 Open/Download )，并且您使用 Properties 中提供的链接。图像文件的选项卡(类似于 https://s3.yourRegion.amazonaws.com/userName/Folder/file.png )。

最后，更改存储桶的 CORS 设置后，您必须清除浏览器的缓存，否则浏览器不会向服务器发出新请求，并且会使用已缓存的不安全版本。