No se pueden obtener datos de imagen del lienzo porque el lienzo ha sido contaminado por datos de origen cruzado
Estoy usando html5Canvas
para obtener colores de la imagen. Para esto escribí el siguiente código en javascript:
http://jsfiddle.net/8dQSS/1/ (Por favor revise la consola para ver la excepción)
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";
}
El código anterior está lanzando la siguiente excepción:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18
¿Alguien puede decirme cómo resolver este problema?