Hi ,I have Written a SignaturePad directive using Signature_Pad in Ionic Framework.
Please Follow and use the code to create the directive
1.Download the signature_pad js from here and add it into your js folder
2.Add this js file path in index.html file
<script src="lib/ionic/js/signature_pad.js"></script>
3.Create Directive
MyController.directive('signaturepad', [
'$ionicModal'
function($ionicModal) {
var canvasPad, signaturePad;
return {
/* Only use as <SignaturePad> tag */
restrict: 'E',
/* Our template */
templateUrl: 'templates/sign_pad.html',
link: function(scope, element, attrs) {
scope.parentsignature = attrs.parentsignature || ' ';
$ionicModal.fromTemplateUrl('templates/signature.html', {
scope: scope,
animation: 'slide-in-up'
}).then(function(modal) {
scope.modal = modal;
});
scope.openSignPad = function() {
scope.modal.show();
canvasPad = document.getElementById("signature-pad");
scope.resizeCanvas(); // To re size the canvas according to the mobile devices
signaturePad = new SignaturePad(canvasPad);
signaturePad.minWidth = 1;
signaturePad.maxWidth = 1.5;
signaturePad.dotSize = 3;
signaturePad.penColor = "rgb(66, 133, 244)";
};
scope.closeModal = function() {
scope.modal.hide();
};
//Cleanup the modal when we're done with it!
scope.$on('$destroy', function() {
scope.modal.remove();
});
// Execute action on hide modal
scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
scope.$on('modal.removed', function() {
// Execute action
});
scope.savePSign = function() {
if (signaturePad.isEmpty()) {
utilService.showWarning("Please Sign !");
} else {
scope.parentsignature = signaturePad.toDataURL();
scope.closeModal();
}
};
scope.clearPSign = function() {
signaturePad.clear();
};
scope.resizeCanvas= function() {
var ratio = window.devicePixelRatio || 1;
canvasPad.width = canvasPad.offsetWidth * ratio;
canvasPad.height = canvasPad.offsetHeight * ratio;
canvasPad.getContext("2d").scale(ratio, ratio);
};
}
}
}
]);
4. Create sign_pad.html and add the below code
<img height="60" width="300" ng-src="{{parentsignature}}" ng-click="openSignPad()">
5.Create signature.html and the below code
<ion-modal-view>
<div class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas id="signature-pad"></canvas>
</div>
<div class="description" >Sign above</div>
<button class="button clear" data-action="clear" ng-click="clearPSign()">Clear</button>
<button class="button save" data-action="save" ng-click="savePSign()">Save</button>
</div>
</div>
</ion-modal-view>
6. Add the element in require html form
<signaturepad> </signaturepad>
