Невозможно получить данные изображения из холста, потому что холст был испорчен данными перекрестного происхождения
Я использую html5 Canvas
для получения цветов с изображения. Для этого я написал следующий код в javascript:
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";
}
Приведенный выше код генерирует следующее исключение:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18
Кто-нибудь может сказать мне, как решить эту проблему?
Ответы
Ответ 1
Единственное решение, которое я знаю, - это иметь изображение, которое вы хотите загрузить на том же сервере, что и ваши файлы, вы не можете получить доступ к любому изображению, которое вы хотите в Интернете, через свой холст.
EDIT: Если вы хотите, вы можете сделать как это.
Ответ 2
Используете ли вы это через файловую систему? Если да, запустите его на сервере (localhost).
Ответ 3
У меня такая же ошибка. Я много искал о 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
Я удалил их, и моя проблема была исправлена