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.


  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() {
            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() {
        url: ‘ds/saveData’, // ds is controller and getData is method
        data: { signature: $(‘#divSignature’).jSignature(‘getData’) }
<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);
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: Logo

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s