HTML Canvas image to Base64 problem

Question

I\'m having a problem with retrieving the base64 version of an image displayed on a canvas. I\'ve looked at the other questions but none of the solutions including canvas2im

Answer 1

Your document.write() call occurs immediately upon page load, before your img is loaded and drawn and before your onclick handler can ever run. You need to wait to generate the data URI until after everything has finished happening to the canvas.

Ignoring the onclick, here's something that writes out the data url after the image has loaded and been drawn to the canvas in a rotated fashion:

You can see this demo in action here: http://phrogz.net/tmp/upside-down-image-url.html

Note that the image you load must be on the same domain as your script, or else you will not be allowed to create the data URL.