Angular  

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,

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

 

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.
    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
  1. var canvas = document.getElementById('signatureCanvas');  
  2. var signaturePad = new SignaturePad(canvas);  

Step 4: Save Canvas using service

My Controller:
  1. // for signature image  
  2. var sigImg = signaturePad.toDataURL().replace('data:image/png;base64,', '');  
  3. var name = $scope.sign.name;  
  4. var xml = JSON.stringify  
  5. ({  
  6.     'name': name,  
  7.     'imageData': sigImg  
  8. });  
  9. // call add service for save signature  
  10. signService.Add(name, sigImg).success(function(response) {});  
My Service:
  1. Add: function(name, imagedata)  
  2. {  
  3.     return $http  
  4.     ({  
  5.         method: 'POST',  
  6.         headers:  
  7.         {  
  8.             'Content-Type': 'application/json; charset=utf-8'  
  9.         },  
  10.         url: 'http://kunalpatel.tk/ProductService.svc/AddNewSignature',  
  11.         data:  
  12.         {  
  13.             name: name,  
  14.             imageData: imagedata  
  15.         }  
  16.     });  
  17. }  
Step 5: Load signature on screen

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

My Controller
  1. signService.get().success(function(response)  
  2. {  
  3.     $scope.Signatures = JSON.parse(response.d);  
  4. });  
My Service
  1. get: function()   
  2. {  
  3.     return $http  
  4.     ({  
  5.         method: 'POST',  
  6.         headers:  
  7.         {  
  8.             'Content-Type': 'application/json; charset=utf-8'  
  9.         },  
  10.         url: 'http://kunalpatel.tk/ProductService.svc/LoadAllSignature',  
  11.         data: {}  
  12.     });  
  13. }  
Step 5 : Final Output

Demo for test signature pad working:
 

Read more articles on AngularJS:

Membership not found