I'm attempting to save a dataURL made from an HTML5 canvas to my mysql db.
I have ajax setup to pull the var I've made called "dataURL" and I'm setting dataURL to the canvas's img using this code:
dataURL = oCanvas.toDataURL();
my issue is the canvas's dataURL has alot of characters that don't work well in pulling for ajax so I need a way to encode it or manipulate it differently so my end result can be saved to a mysql db and then later "decoded" to display once again.
I know my AJAX works because if I set the var dataURL to something like "cheese" it saves in the database as cheese.
Any help would be much appreciated!
The data you receive from toDataUrl will be in a format like this:
data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD.... (very long string)
Firstly filter the data received to only the part after data:image/png;base64,
Then use whatever Base64 library your language provides to decode it to an array of bytes (or blob). If you are using Java: Apache Commons Codec
Here is an example in groovy:
def bytes = new Base64().decode(filteredData) as byte[]
You can save the decoded result to your database (to be retrieved later)
I actually ended up setting an event so when the image was done drawing it would set the dataURL to a hidden form element. No longer needed to pass it through ajax :). Thanks for the suggestion though.
Base64 encoding takes almost 4x as many bytes to encode an image. It is suggested to use window.atob to decode the base64 before transmission whether you are using ajax or regular forms. Of course IE doesn't support it but this looks like a shim.