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.

回答1:

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/

回答2:

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

--allow-file-access-from-files

回答3:

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

回答4:

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.

回答5:

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.