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