Digital Signature using jQuery

Digital Signature using jQuery
Digital Signature control is based on jSignature jQuery plug-in. This plug-in creates field that allows a user to draw a signature either via a mouse, your finger on touch enabled devices or a pen input device.
Basically plug-in provides area to draw signature and convert signature to image in the binary format.
Note: This plug-in requires a HTML5 supported browser.

Signature
Steps

  1. Download jSignature file from here, include it in your project and add reference of the same.
  2. Create a div which will act as signature box.
    <div id=”divSignature” style=”border: solid 1px black; width: 220px; height: 80px”></div>
  3. Initialize this div as signature box at document ready
    $(document).ready(function () {

      $(“#divSignature”).jSignature({width:220px, height:80px, mousedown:function(){}});

    });

  4. Add save button to capture signature data. Basically it creates signature as a image and gives you binary data of the image
    <input id=”btnSave” type=”button” value=”Save” onclick=”return GetSignature();”/>
  5. GetSignature() method capture data and pass it to controller using jQuery Ajax call.
    function GetSignature() {
        $.ajax({
            type: ‘POST’,
            url: ‘ds/saveData’,//ds is controller and saveData is method
            data: { signature: $(‘#divSignature’).jSignature(‘getData’) }
        });
  6. At Controller get signature data as string which is binary format of signature image
    public void saveData(string signature)
    {
    byte[]bytIn = null;
           signature = signature.Replace(“data:image/png;base64,”, “”);
           bytIn = Convert.FromBase64String(signature);
    }

Code  csihtml
<script src=”@Url.Content(“~/Scripts/jquery-1.5.1.min.js”)” type=”text/javascript”></script>
<script src=”@Url.Content(“~/Scripts/jSignature.js”)” type=”text/javascript”></script>
 <script type=”text/javascript”>

$(document).ready(function(){                                             $(“#divSignature”).jSignature({ width: 220,height: 80, mousedown: function(){}});       });

function GetSiignature() {
    $.ajax({
        type:‘POST’,
        url: ‘ds/saveData’, // ds is controller and getData is method
        data: { signature: $(‘#divSignature’).jSignature(‘getData’) }
    });
}
</script>
<h2>Signature Please </h2>
<div id=”divSignature” style=”border:soliid 1px black; width:220px; height:80px”></div>
<input id=”btnSave” type=”button” value=”Save” onclick=”return GetSignature();”/>
<input type=”button” value=”clear” onclick=”$(‘#divSignature’).jSigniature(‘clear’);”/>
Code Controller
public void saveData(string signature)
{
    byte[] bytIn = null;
    signature = signature.Replace(“data:image/png;base64,”,“”);
    bytIn = Convert.FromBase64String(signature);
}
Advertisements
This entry was posted in jQuery, MVC and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s