Digital E-Signature Pad is a jQuery module that exploits HTML5 canvas component and JavaScript to create an adaptable and smooth Signature Pad on your site page and application. The module additionally can record the attracted signature JSON for later recovery. Know that the jQuery module likewise requires Numeric JavaScript library and Bezier curve tool included.
Step 1: Include the required jQuery Signature Pad JS and CSS Style in the head section of your page.
|
1 2 3 4 5 6 7 8 9 |
<link href="./css/jquery.signaturepad.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="./js/numeric-1.2.6.min.js"></script> <script src="./js/bezier.js"></script> <script src="./js/jquery.signaturepad.js"></script> <script type='text/javascript' src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script> <script src="./js/json2.min.js"></script> <link href="./css/app_style.css" rel="stylesheet"> |
Step 2: Setup for our signature pad area.
|
1 2 3 4 5 6 7 |
<div id="signArea" > <h2 class="tag-info">Put signature below,</h2> <div class="sig sigWrapper" style="height:auto;"> <div class="typed"></div> <canvas class="sign-pad" id="sign-pad" width="300" height="100"></canvas> </div> </div> |
Step 3: Assign the signaturePad() function with our signature Pad tag ID
|
1 |
$('#signArea').signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:90}); |
Step 4: Add button and html2canvas function to save the drawn signature as the image to the relevant folder.
You can also download html2canvas.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$("#btnSaveSign").click(function(e){ html2canvas([document.getElementById('sign-pad')], { onrendered: function (canvas) { var canvas_img_data = canvas.toDataURL('image/png'); var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, ""); //ajax call to save image inside folder $.ajax({ url: 'save_sign.php', data: { img_data:img_data }, type: 'post', dataType: 'json', success: function (response) { window.location.reload(); } }); } }); }); |
Step 5: Now we need to add style and signature pad area layout for the view page, and save it as app_style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
body{ font-family:monospace; text-align:center; } #btnSaveSign { color: #fff; background: #f99a0b; padding: 5px; border: none; border-radius: 5px; font-size: 20px; margin-top: 10px; } #signArea{ width:304px; margin: 50px auto; } .sign-container { width: 60%; margin: auto; } .sign-preview { width: 150px; height: 50px; border: solid 1px #CFCFCF; margin: 10px 5px; } .tag-info { font-family: cursive; font-size: 12px; text-align: left; font-style: oblique; } |
Step 6: PHP Code to store your signatures data as image and save it as save_sign.php
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php $result = array(); $imagedata = base64_decode($_POST['img_data']); $filename = md5(date("dmYhisA")); //Location to where you want to created sign image $file_name = './doc_signs/'.$filename.'.png'; file_put_contents($file_name,$imagedata); $result['status'] = 1; $result['file_name'] = $file_name; echo json_encode($result); ?> |
Step 7: Code to preview saved signatures image on our page.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="sign-container"> <?php $image_list = glob("./doc_signs/*.png"); foreach($image_list as $image){ //echo $image; ?> <img src="<?php echo $image; ?>" class="sign-preview" /> <?php } ?> </div> |
Final Signature page code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Signature Pad & Canvas Image</title> <link href="./css/jquery.signaturepad.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="./js/numeric-1.2.6.min.js"></script> <script src="./js/bezier.js"></script> <script src="./js/jquery.signaturepad.js"></script> <script type='text/javascript' src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script> <script src="./js/json2.min.js"></script> <link href="./css/app_style.css" rel="stylesheet"> </head> <body> <h2>Learn Infinity | jQuery Signature Pad & Canvas Image</h2> <div id="signArea" > <h2 class="tag-info">Put signature below,</h2> <div class="sig sigWrapper" style="height:auto;"> <div class="typed"></div> <canvas class="sign-pad" id="sign-pad" width="300" height="100"></canvas> </div> </div> <button id="btnSaveSign">Save Signature</button> <div class="sign-container"> <?php $image_list = glob("./doc_signs/*.png"); foreach($image_list as $image){ //echo $image; ?> <img src="<?php echo $image; ?>" class="sign-preview" /> <?php } ?> </div> <script> $(document).ready(function() { $('#signArea').signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:90}); }); $("#btnSaveSign").click(function(e){ html2canvas([document.getElementById('sign-pad')], { onrendered: function (canvas) { var canvas_img_data = canvas.toDataURL('image/png'); var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, ""); //ajax call to save image inside folder $.ajax({ url: 'save_sign.php', data: { img_data:img_data }, type: 'post', dataType: 'json', success: function (response) { window.location.reload(); } }); } }); }); </script> </body> </html> |
