Create Signature Pad Using AngularJS

Today I am going to introduce you to using signature pad with AngularJS and WCF service. In this article I am going to show you how to bind signature pad using WCF services.

I used the following in this article:

1. Canvas signature pad.
2. AngularJS
   
3. How to store your canvas signature in database and display on screen.

Step 1: SQL Script for signature pad,

CREATE TABLE[dbo].[mstSign]
    (
        [SignId][UNIQUEIDENTIFIER] NOT NULL, [cName][VARCHAR](150) NULL, [cSigndata][VARCHAR](MAX) NULL, [dtDateTime][DATETIME] NULL
    )

 

Step 2: Wcf Service

1. I used my hosted service here.
2. So, you can get the latest service from my previous article Call WCF Service Using jQuery.
   
3. I updated my service code there, and also you can see WCF configuration using Windows activation service from web.config.
   

Step 3: Html5 Canvas code

1. I used signature_pad.js for displaying signature pattern on screen.
2. This JavaScript file is attached in source code.
   

   <div class="form-group">
       <label for="name">Enter Your Signature</label>
       <canvas id='signatureCanvas' width='300' height='150' style='border: 1px solid black;'></canvas>
   </div>

JavaScript code for displaying signature

var canvas = document.getElementById('signatureCanvas');
var signaturePad = new SignaturePad(canvas);

Step 4: Save Canvas using service

My Controller:

// for signature image
var sigImg = signaturePad.toDataURL().replace('data:image/png;base64,', '');
var name = $scope.sign.name;
var xml = JSON.stringify
({
    'name': name,
    'imageData': sigImg
});
// call add service for save signature
signService.Add(name, sigImg).success(function(response) {});

My Service:

Add: function(name, imagedata)
{
    return $http
    ({
        method: 'POST',
        headers:
        {
            'Content-Type': 'application/json; charset=utf-8'
        },
        url: 'http://kunalpatel.tk/ProductService.svc/AddNewSignature',
        data:
        {
            name: name,
            imageData: imagedata
        }
    });
}

Step 5: Load signature on screen

My Html:

<tr ng-repeat="sign in Signatures">
    <td><b>{{ sign.cName }}</b></td>
    <td class="zoom_img"><img src="http://www.kunalpatel.tk/Images /Signature/{{ sign.cSigndata }}" height="50" width="100" /> </td>
</tr>

My Controller

signService.get().success(function(response)
{
    $scope.Signatures = JSON.parse(response.d);
});

My Service

get: function()
{
    return $http
    ({
        method: 'POST',
        headers:
        {
            'Content-Type': 'application/json; charset=utf-8'
        },
        url: 'http://kunalpatel.tk/ProductService.svc/LoadAllSignature',
        data: {}
    });
}

Step 5 : Final Output

Demo for test signature pad working:

 

Read more articles on AngularJS:

• Filters In AngularJS
• AngularJS View And Routing