Capture signature using HTML5 and save it as image to database

Question

I am just starting to learn Jquery and working on asp.net webform app that will be used on a touchscreen device, and I need to capture user signature, basically user will sign and after hit save, I want their signature to be saved as an image to SQL server database so I can retrieve and display it later on a webpage.

I found this question: Capture Signature using HTML5 and iPad

and the jQuery plugin works great, exactly as I want.

Here the demo: http://szimek.github.io/signature_pad

Here the plug-in: https://github.com/szimek/signature_pad

So on the demo I see after hit "save" you will go to a new tab that display an image of your signed signature, and I noticed that the url is something like

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAApIAAAE+CAYAAAA+vvBuAAAgAElEQVR4Xu3df8i37V0X8I/l0GY5BzZdiWslKhnNUaBR62lBP0htjuiHfz0uROgPmQsH/hE8jiKKjLl/IoLa9k+NMOYyhCRamyM0WI9bUBst5kzbUNfjxBlmaLy389jO+3q......

1. What does this url mean?

2. what type of variable will be used to store this in database table (nvarchar, binary...)

3 (MAIN QUESTION). How do I get those data text in code behind C# button click event to store them to a string variable for other purposes. Can someone provide a simple example so i can go from there?

if I am missing something please let me know, as I am looking at the .html file and those .js files in the demo project of that plugin, I am lost.

Answer 1

1. That URL is in BASE64 format. You can use that long string of characters in the SRC attribute of an image tag and it will be displayed.

2. To get better performance, the recommended way of storing photos is to store the image on the disk (using some kind of server side language) and then save the name of the file in a database as a CHAR or TEXT.

3. Not quite sure. I've never used the library before.