3

Am pre drawing pictures using canvas and I need to then save it to a Image Object using Canvas.toDataURL(), but on Chrome I get the error "Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." I need this to work locally, but this means seems to not work locally using chrome. So the question is, how can I get the data from canvas even when running locally? P.S. This works fine on firefox but doesnt on Chrome

1 Answers1

2

You are probably using file:// which won't work with Chrome (or other browsers in the future).

There are two ways to get around this:

  1. Start Chrome with this command line option
    "C:\PathTo\Chrome.exe" –allow-file-access-from-files
  2. Install a light-weight web server on your local machine so you can access the page through localhost/127.0.0.1 such as for example Mongoose (or Apache/LAMP etc.).

Loading an image from the file:// protocol is considered a CORS violation which means you won't be able to extract the pixels from canvas (toDataURL() or getImageData()).

Community
  • 1
  • 1
  • Thanks, But this wouldn't work on other computers, for example if i were to use this web page at the library I wouldnt be able to install all the servers, I was looking for a more in Javascript method. Otherwise I'll just be forced to use firefox –  Feb 27 '14 at 01:14
  • @androidmaster there is no way around this using JavaScript. It's a security feature that all browsers will adopt to protect users from pages linking to some location on the harddisk etc. –  Feb 27 '14 at 01:16
  • 1
    :( good bye good old days then, no more playing webgl games while offline –  Feb 27 '14 at 21:49