2

I am trying to make a vanilla JavaScript game with the html 5 canvas element, and in order to make color-based hit boxes, I need to grab image data from certain spots on the canvas. Whenever I use getImageData(), I get this error:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

All of the images that are being displayed on the canvas are being pulled from a local file. Is there any way that I could get this working on Chrome?

I draw the images by placing html image tags on the page and using context.drawImage(*img id, x, y*);

Jaap
  • 81,064
  • 34
  • 182
  • 193
Luke Branson
  • 21
  • 4
  • Might want to check out http://stackoverflow.com/questions/9972049/cross-origin-data-in-html5-canvas Local filesystem will cause cross origin issues. If you tried to serve it locally it should work. – Scott Fanetti Sep 12 '16 at 21:36

3 Answers3

2

Starting your local server might be the better approach. And Chrome stays safe.

cd path/to/files
python -m SimpleHTTPServer

Point your browser to

http://localhost:8000

original answer via @gman

Kai
  • 417
  • 4
  • 15
  • Or the [python 3 alternative](https://stackoverflow.com/a/17351115/2759427): `python -m http.server []` – Cobertos Sep 06 '18 at 16:54
1

Converting the Image to Base64 and then use it image tags, that will solve it without changing any security settings

Pratheeswaran
  • 205
  • 4
  • 11
0

It is CORS. You can start chrome with --allow-file-access-from-files for development purposes and later load the files from the same server the site is being hosted on, so that there is no problem. Note that this flag changes the security settings of chrome.

ASDFGerte
  • 4,695
  • 6
  • 16
  • 33