Impossible d'obtenir des données d'image à partir du canevas car le canevas a été contaminé par des données d'origine croisée
Je suis en utilisant html5 Canvas
pour obtenir des couleurs de l'image. Pour ce que j'ai écrit le code suivant dans le code javascript :
http://jsfiddle.net/8dQSS/1/ (Pls vérifier la console pour voir l'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://www.xxxxxxxxxxxx.com/demos/assets/image.jpg";
}
Le code ci-dessus est de lancer l'exception suivante :
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18
Quelqu'un peut-il me dire comment résoudre ce problème?
source d'informationauteur Gaurav
Vous devez vous connecter pour publier un commentaire.
La seule solution que je connaisse est d'avoir l'image que vous souhaitez charger hébergé sur le même serveur que vos fichiers, vous ne pouvez pas accéder et gérer n'importe quelle image que vous voulez sur le web par le biais de votre toile.
EDIT : Si vous voulez, vous pouvez faire comme ceci.
Êtes-vous d'utiliser ce par le biais de système de fichiers .? Si oui, alors l'exécuter sur le serveur(localhost).
J'ai eu ce même message d'erreur. J'ai beaucoup cherché sur
crossorigin
sur la toile. La première solution était d'ajouter leimg.crossOrigin='anonymous'
. Mais le problème demeure. J'ai été en utilisant les actifs servi par s3, et résolu le problème en ajoutant ceci sur le seau de la politique.Les actifs de seau a certains paramètres comme
X-Amz-Expires
X-Amz-Date
je les ai retirées et mon problème ws fixe