Cross-origin data in HTML5 canvas


I'm loading an image in js and draw it into a canvas. After drawing, i retrieve imageData from the canvas:

var img = new Image();
img.onload = function() {
    canvas.drawImage(img, 0, 0);
    originalImageData = canvas.getImageData(0,0,width, height)); //chrome fails
}
img.src = 'picture.jpeg';

This works perfectly both in Safari and Firefox, but fails in Chrome with the following message:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

The javascript file and the image are located in the same directory, so i don't understand the behavior of chorme.

To enable CORS (Cross-Origin Resource Sharing) for your images pass the HTTP header with the image response:

Access-Control-Allow-Origin: *

The origin is determined by domain and protocol (e.g. http and https are not the same) of the webpage and not the location of the script.

If you are running locally using file:// this is generally always seen as a cross domain issue; so its better to go via

http://localhost/

To solve the cross domain issue with file://, you can start chrome with the parameter

--allow-file-access-from-files

If the server response headers contains Access-Control-Allow-Origin: *, then you can fix it from client side: Add an attribute to the image or video.

<img src="..." crossorigin="Anonymous" />
<video src="..." crossorigin="Anonymous"></video>

Otherwise you have to use server side proxy.


var img = new Image();
img.onload = function() {
    canvas.drawImage(img, 0, 0);
    originalImageData = canvas.getImageData(0,0,width, height)); //chrome will not fail
}
img.crossOrigin = 'http://profile.ak.fbcdn.net/crossdomain.xml';//crossdomain xml file, this is facebook example
img.src = 'picture.jpeg';

Hope this helps


var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.crossOrigin = "anonymous";
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  originalImageData = ctx.canvas.toDataURL();
}
img.src = 'picture.jpeg';

hope this helps.