Javascript 无法从画布中获取图像数据，因为画布已被跨域数据污染
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14438377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unable to get image data from canvas because the canvas has been tainted by cross-origin data
提问by Gaurav
I am using html5 Canvasto get colors from image. For this i wrote the following code in javascript :
我正在使用 html5Canvas从图像中获取颜色。为此，我在 javascript 中编写了以下代码：
http://jsfiddle.net/8dQSS/1/(Pls check the console to see the exception)
http://jsfiddle.net/8dQSS/1/（请检查控制台以查看异常）
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://www.xxxxxxxxxxxx.com/demos/assets/image.jpg";
}
The above code is throwing the following 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
Can anybody please tell me how to solve this issue?
谁能告诉我如何解决这个问题？
采纳答案by Razouille
回答by Ashisha Nautiyal
Are you using this through file system .? If yes then run it on the server(localhost).
你是通过文件系统使用它吗？如果是，则在服务器（本地主机）上运行它。
回答by Thadeu Brito
I got this same error. I searched a lot about crossoriginon canvas. The first solution was add the img.crossOrigin='anonymous'. But the problem still remains. I was using assets served by s3, and fixed the problem adding this on the bucket policy.
我遇到了同样的错误。我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/*"
}
]
}
The assets from bucket had some params like X-Amz-Expires, X-Amz-DateI removed them and my problem ws fixed
存储桶中的资产有一些参数，例如X-Amz-Expires，X-Amz-Date我删除了它们并且我的问题得到了解决
