Create Signature Pad Using AngularJS

Kunal Patel
8y
25.6k
0
2

Article

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:

Canvas signature pad.
AngularJS
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

I used my hosted service here.
So, you can get the latest service from my previous article Call WCF Service Using jQuery.
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

I used signature_pad.js for displaying signature pattern on screen.
This JavaScript file is attached in source code.
1. <div class="form-group">
2. <label for="name">Enter Your Signature</label>
3. <canvas id='signatureCanvas' width='300' height='150' style='border: 1px solid black;'></canvas>
4. </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:

Create Signature Pad Using AngularJS

JavaScript code for displaying signature var canvas = document.getElementById('signatureCanvas'); var signaturePad = new SignaturePad(canvas);

JavaScript code for displaying signature

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