Problems With Todataurl Html5 Other Ways To Get Canvas Data?

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

Solution 1:

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()).