4

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.

Community
  • 1
  • 1
Ronaldinho Learn Coding
  • 13,254
  • 24
  • 83
  • 110

3 Answers3

5

  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.

arilence
  • 506
  • 4
  • 10
  • 3. Ok so how do I capture that url and stoer it as a string variable in c# code_bedind? – Ronaldinho Learn Coding Sep 14 '15 at 23:11
  • 1
    Within the app.js file in the example project, there is an if/else statement with this piece of code `window.open(signaturePad.toDataURL());` You'll want to replace it with an AJAX call to your c# code with the function. `signaturePad.toDataURL()` – arilence Sep 15 '15 at 02:36
  • could you help me with this, this is where I am lost, how do I save the url to a string variable named ImageURL in the code c# behind? So I can save that variable in database later. – Ronaldinho Learn Coding Sep 15 '15 at 03:36
  • 1
    I'll be honest, I don't know much about the .NET c# backend. I just thought I would help out with the knowledge I do know about the first two questions. What I do know is you'll want to look up the [$.ajax function of jquery](http://www.w3schools.com/jquery/ajax_ajax.asp) . For the url attribute, you'll point to your .aspx file with the function for retrieving the data from the ajax request. For the data attribute, set it to the `signaturePad.toDataURL()` function. – arilence Sep 15 '15 at 03:48
3

  1. That is a Base64 encoded image.

    • data: says that data is following instead of a URL
    • image/png; specifies the content "mimetype" the data should be served as
    • base64, indicates the encoding type of the data

  2. As base64 only uses ASCII characters, a varchar(MAX) would be suitable for storage. No need for nvarchar. I normally store the base64 encoding only (the last part after the comma), and keep the mime-type (e.g. image/png) in a separate field.

  3. There are many options in C#. If you store the base64 part separately, you simplify the code a bit.

    • Turn it into an image server-side using byte[] imageBytes = System.Convert.FromBase64String(base64data) and creating an image from the byte array and type.
    • Inject the image into a webpage <img src="@Html.Raw("data:"+ mimetype + "base64," + base64data)"/>

Notes:

  • As @anthony mentions, your would typically store images as files (or in Blob storage nowadays) and only record the filename/URI. This depends on quantity size & usage.
  • We have found it convenient, for certain projects requiring extra security, for base64 images to be stored as encoded & encrypted strings in a database.
  • From comments: To save to, place the string value into a hidden input and update its value. It will then get posted back like any other string. Our own signature plugin just hides the original <input type="text"> it is attached to and puts the value there.
iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
  • 3. Biggest question is "how do I retrieve that Base64 encoded image string (in code behind)?" I don't know how to get it... – Ronaldinho Learn Coding Sep 16 '15 at 13:32
  • It's just a string! :) What is your database framework? Entity framework? Raw SQL queries? Just fetch it like any other string value. – iCollect.it Ltd Sep 16 '15 at 13:33
  • I understand it is a string but I don't know how to get it, it is on `signaturePad.toDataURL()` but how do I get it in code behind? Could you provide some example line of codes? – Ronaldinho Learn Coding Sep 16 '15 at 13:36
  • Add it to a hidden input (or hide the original input) and update its value. It will then get posted back like any other string. Our own signature plugin just hides the original `` it is attached to and puts the value there. – iCollect.it Ltd Sep 16 '15 at 14:15
1

In addition to TrueBlueAussie's answer:

The simplest way to get your string in CodeBehind is:

  • Declare a HiddenField using ASP and assign a Static ID to it. (Static ID is important since ASP normally assigns automatically generated IDs to each control, and this can get difficult to predict).

  • Shape your JavaScript function in a way that SignaturePad writes the output base64 image string into this HiddenField. You can for example, use a button "Verify" that calls the Export function of the SignaturePad.

  • After the string is written into the HiddenField, read it back on CodeBehind. For this, you can use an additional button, for example something like "Save".

There are of course other options which are much more secure/versatile/appropriate, but this might be a good starting point for you.

epereira
  • 55
  • 1
  • 5