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: