E-signature with PHP and Ajax
This blog all about e-signature with PHP and Ajax. Here you will learn how to how to capture the signature and upload it in a folder. If you want you can save in database also. This kind of signature pad with canvas mostly use in web applications for user authentication. In this section, we will learn simple 2 steps to make e-signature pad in PHP y and upload the image using Ajax.
Step by Step procedure to make e-signature pad in PHP/ Codeigniter/Laravel .
Step-1: Download the Signature JS and Css from given below link.
Click Here to download the script.
Step-2: Create a folder in your localhost or htdocs folder.
Step -3: Create a folder asset and extract the above download script.
Step-4- Copy my below index.php and singature.php code
index.php
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 71 72 73 74 75 76 77 78 79 80 81 82 83 | <!DOCTYPE html> <html> <head> <title>PHP Signature Pad Example</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script type="text/javascript" src="./asset/jquery.signature.min.js"></script> <link rel="stylesheet" type="text/css" href="./asset/jquery.signature.css"> <style> .kbw-signature { width: 400px; height: 200px;} #signature canvas{ width: 100% !important; height: auto; } .container{ margin-left: 420px; } </style> </head> <body> <div class="container"> <h1>E-signature with PHP and Ajax </h1> <div class="col-md-12" style="margin-top: 100px;"> <label class="" for="">E-Signature:</label> <br/> <div id="signature" ></div> <br/> <button id="clear">Clear Signature</button> <textarea id="sigpad" name="signature_image" style="display: none"></textarea> </div> <br/> <button class="btn btn-success" id="Submit">Submit</button> <span id="res" style="color: green;"></span> </div> <script type="text/javascript"> var signature = $('#signature').signature({syncField: '#sigpad', syncFormat: 'PNG'}); $('#clear').click(function(e) { e.preventDefault(); signature.signature('clear'); $("#sigpad").val(''); }); </script> <script type="text/javascript"> $("#Submit").click(function(){ //url = "http://192.168.1.147:8080/sign/signature.php"; url = "http://localhost/sign/signature.php"; sigpad= $("#sigpad").val(); $('#res').html('loading....'); $.ajax({ type : 'POST', url : url, data : {signature_image: sigpad}, success: function(result){ $('#res').html('Signature Uploaded successfully'); // location.reload(); }, }) ; }); </script> </body> </html> |
signature.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?php //print_r($_POST); $folderPath = "upload/"; $image_parts = explode(";base64,", $_POST['signature_image']); $image_type_aux = explode("image/", $image_parts[0]); $image_type = $image_type_aux[1]; $image_base64 = base64_decode($image_parts[1]); $file = $folderPath . uniqid() . '.'.$image_type; file_put_contents($file, $image_base64); echo "1"; ?> |
Step-5: Create an upload folder in your main folder.
Now You can able to make e- signature pad.