Edit Question - KnowledgeHub

Title Body

I am using html5 Canvas to get colors from image. For this i wrote the following code in javascript : http://jsfiddle.net/8dQSS/1/ (Pls check the console to see the 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"; } 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?

Tags (comma-separated) Cancel