CODEWITHSUNDEEP
javascripthtmlgoogle-chromecanvascross-domain
Samuel Müller
Samuel Müller

Reputation: 1217

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.

Upvotes: 34

Views: 81539

Answers (6)

Reggie Pinkham
Reggie Pinkham

Reputation: 12708

Make sure you are serving the local files rather than browsing to them. If you are on OSX you already have a Python Server installed. Simply cd into your web site’s directory in the command line, run python -m SimpleHTTPServer, then go to http://localhost:8000/ in the browser.

Alternately, you can use Node. Run npm install -g http-server, then http-server. This will serve your index page on port 8080, i.e. browse to http://localhost:8080/.

Upvotes: 0

Jeff Tian
Jeff Tian

Reputation: 5893

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.

Upvotes: 1

code.rider
code.rider

Reputation: 1897

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.

Upvotes: 3

Markus Madeja
Markus Madeja

Reputation: 856

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

--allow-file-access-from-files

Upvotes: 13

Gustavo Eduardo Bonilla Montoy
Gustavo Eduardo Bonilla Montoy

Reputation: 83

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

Upvotes: 5

Ben Adams
Ben Adams

Reputation: 3431

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/

Upvotes: 25

Related Questions