Canvas 我应该将CORS设置设置为什么以及设置在何处，以便画布不会'；你不会被污染吗？

我有一个大画布，上面有图标和图片，这些都来自我的S3存储桶。当我试图上传它（运行

toDataUrl

）时，Chrome抱怨说

未能对“HtmlCanvaElement”执行“toDataURL”：受污染的画布 可能无法导出

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

谷歌搜索这个问题会带来很多关于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>

*
匿名的
放
邮递
得到
头
*

然而，这是行不通的

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

---

那么，我应该改变什么，在哪里，这样我的画布就不会被污染了？

您的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>

至
“匿名”

此外，检查s3上的图像是否已公开（应该有一个被授权人
Everyone
设置为
Open/Download
），并且您是否使用图像文件
属性
选项卡中的链接（类似
https://s3.yourRegion.amazonaws.com/userName/Folder/file.png
）

最后，更改存储桶的CORS设置后，必须清除浏览器的缓存，否则浏览器不会向服务器发出新请求，它将使用缓存的不安全版本。
Oh。我有很多这样的代码：
var background=document.getElementById（'background'）
，带有各种变量名。为这些设置crossorigin的语法是什么？@Yeats您必须在加载图像之前设置
标记的
crossorigin
属性，或其DOM对象的
.crossorigin
属性，否则，浏览器将不会请求获取原点安全资源，图像将污染画布。跨源资源共享策略已阻止加载来自源“”的映像：请求的资源上不存在“访问控制允许源”标头。因此不允许访问源“”。您确定您获得了正确的链接并且该图像已公开吗？非常确定。我已经处理这些图片很长时间了。