无法从canvas获取图像数据，因为canvas已被跨源数据污染
我正在使用html5 Canvas从图像中获取颜色。 为此，我在javascript中编写了以下代码：
http://jsfiddle.net/8dQSS/1/ （请检查控制台以查看exception）
function getImageColor() { var colors = []; var image = new Image(); image.onload = function () { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; // Draw the image in canvas var ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0); // Get the pixel data var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // Loop through imageData.data - an array with 4 values per pixel: red, green, blue, and alpha for (var x = 0; x < imageData.width; x++) { for (var y = 0; y < imageData.height; y++) { var index = 4 * (y * imageData.width + x); var r = imageData.data[index]; var g = imageData.data[index + 1]; var b = imageData.data[index + 2]; var a = imageData.data[index + 3]; colors.push("rgb(" + r + "," + g + "," + b + ")"); } } }; image.src = "http://sofzh.miximages.com/javascript/image.jpg"; }
上面的代码抛出以下exception：
Unable to get image data from canvas because the canvas has been tainted by cross-origin data. Uncaught Error: SECURITY_ERR: DOM Exception 18
有谁能告诉我如何解决这个问题？
我所知道的唯一解决方案是将您要加载的图像托管在与文件相同的服务器上，您无法通过canvas访问和处理Web上的任何图像。
编辑：如果你想，你可以这样做。
你是通过文件系统使用它吗？ 如果是，则在服务器（localhost）上运行它。
我得到了同样的错误。 我在canvas上搜索了很多关于crossorigin内容。 第一个解决方案是添加img.crossOrigin='anonymous' 。 但问题仍然存在。 我正在使用s3提供的资产，并修复了在存储桶策略中添加此问题的问题。
{ "Version": "2008-10-17", "Statement": [ { "Sid": "AllowPublicRead", "Effect": "Allow", "Principal": { "AWS": "*" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::seu-candidato/*" } ] }
来自桶的资产有一些像X-Amz-Expires ， X-Amz-Date我删除它们的问题，我的问题已解决