Markup image with javascript and save -

i trying add markup image. user able add text, drawings , images. guessing easiest javascript on front end. question is, easiest way save final image. can image saved javascript well. need serialize image , save on end? there libraries these kinds of problems, seem pretty common.

i know open ended on manipulating images javascript , saving them the backend, java in case, helpful.

you can load image in html5 canvas , draw on top of using javascript. when user finished can use todataurl() method of canvas bit64 encoded version of image can send or save like. in example send 64bit encoded string webservice or api save it.

here example made myself: http://yoerivandamme.com/html5/demos/licenseplate.html

note i'm using kineticjs in example, achieve same thing vanilla javascript.

i drawing licenseplate using javascript , i'm adding text based on user input. load image in stead of drawing manually.

other example: http://www.briffett.net/squirrel/

consider html

<canvas id="mycanvas"> </canvas> 

then use javascript work it:

//vanilla js, advise use library kineticjs //paint things: var can = document.getelementbyid("mycanvas"); var ctx = can.getcontext("2d"); //after painting done image var bit64imagestring = can.todataurl(); 

if want save image on server, use ajax call , send bit64imagestring server. point on can whatever want :)