HTML5 save canvas to file on server

Question

hi,

i need to create a component using html5 canvas that given an image the user can paint on it and directly (via a kind of save button) upload it's customized version on the server.

Can i use html canvas for it ? Any suggestion ?

thx in advance

Answer 1

You can get the image as data-url like this:

var dataUrl = document.getElementById('your-canvas').toDataUrl();

You could then send this (very long string) to the server and save it to a file after decoding it (it is encoded in base64).

EDIT: Remember to submit this via POST, as suggested in the comments. GET has some length-limits in various browsers, so its likely to exceed those limits with such a huge amout of data.

Answer 2

I tried:

var canvas = document.getElementById('testcanvas');
var dataUrl = canvas.toDataUrl();

but I get this error in firefox error console:

Error: canvas.toDataUrl is not a function Source File: http://localhost/wordpress30/html5.html Line: 40