Javascript 无法从画布获取图像数据，因为画布已被跨原点数据污染

我正在使用html5

Canvas

从图像中获取颜色。为此，我用javascript编写了以下代码：

（请检查控制台以查看异常）

---

有人能告诉我如何解决这个问题吗？

我知道的唯一解决方案是将要加载的图像与文件托管在同一台服务器上，您无法通过画布访问和处理web上的任何图像

---

编辑：如果您愿意，您可以这样做。

您是否通过文件系统使用此功能。？如果是，则在服务器（localhost）上运行它

我也犯了同样的错误。我在画布上搜索了很多关于

crossorigin

。第一个解决方案是添加

img.crossOrigin='anonymous'

。但问题依然存在。我使用的是s3提供的资产，并修复了将其添加到bucket策略中的问题

{
  "Version": "2008-10-17",
  "Statement": [
     {
       "Sid": "AllowPublicRead",
       "Effect": "Allow",
       "Principal": {
         "AWS": "*"
        },
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::seu-candidato/*"
     }
  ]
}

---

bucket中的资产有一些参数，如

X-Amz-Expires

，

X-Amz-Date

我删除了它们，我的问题得到了解决，ws-fixed

不使用其他域的图像，这些域的内容你是不允许访问的？也许这有助于诊断（这是一篇旧文章）：我从一个画布上发现了这个错误，我是从一个SVG元素创建的数据URI生成的，没有任何图像。在FF和Safari上工作很好。我从一个SVG元素中用JavaScript动态创建的图像中获得这个结果，并作为数据URI传递。这是一种痛苦，然后说：“未捕获的安全错误：试图突破用户代理的安全策略。”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 

{
  "Version": "2008-10-17",
  "Statement": [
     {
       "Sid": "AllowPublicRead",
       "Effect": "Allow",
       "Principal": {
         "AWS": "*"
        },
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::seu-candidato/*"
     }
  ]
}