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.
- <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:
-
- var sigImg = signaturePad.toDataURL().replace('data:image/png;base64,', '');
- var name = $scope.sign.name;
- var xml = JSON.stringify
- ({
- 'name': name,
- 'imageData': sigImg
- });
-
- 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: