By Samuel Müller


2012-04-02 06:57:18 8 Comments

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.

5 comments

@Jeff Tian 2017-07-21 04:03:57

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.

@code.rider 2016-10-07 11:42:50

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.

@Markus Madeja 2013-08-09 12:56:05

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

--allow-file-access-from-files

@yeelan 2015-04-08 21:54:52

Thanks Markus! This solution works for me much quicker. To explain it a little bit, you need to exit chrome first and if you are running on Mac, open terminal and run open /Applications/Google\ Chrome.app --args --allow-file-access-from-files command

@Gustavo Eduardo Bonilla Montoy 2013-02-21 19:46:39

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

@Quentin 2015-11-24 10:03:15

http://profile.ak.fbcdn.net/crossdomain.xml is not a valid value for the crossorigin attribute and crossdomain.xml files are a thing used by Adobe Flash, not CORS.

@Ben Adams 2012-07-01 21:42:43

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/

@pocjoc 2013-05-20 19:53:42

is right, using file:// is seen as a cross domain issue. The same code using file:// shows this error and using http:// it works fine. Thanks.

Related Questions

Sponsored Content

26 Answered Questions

[SOLVED] Disable same origin policy in Chrome

27 Answered Questions

[SOLVED] Storing Objects in HTML5 localStorage

3 Answered Questions

[SOLVED] Using HTML5/Canvas/JavaScript to take in-browser screenshots

26 Answered Questions

[SOLVED] Access-Control-Allow-Origin Multiple Origin Domains?

31 Answered Questions

[SOLVED] Change an HTML5 input's placeholder color with CSS

20 Answered Questions

[SOLVED] How to clear the canvas for redrawing

14 Answered Questions

[SOLVED] Resize HTML5 canvas to fit window

11 Answered Questions

[SOLVED] How does Access-Control-Allow-Origin header work?

2 Answered Questions

[SOLVED] Local Cross-origin data error

2 Answered Questions

[SOLVED] can not get canvas.getContext('2d').getImageData(x,x,x,x)

Sponsored Content