e-Signature Pad Using Jquery AJAX and PHP | Digital Signature Pad On Submission Form

Digital Signature Pad On Submission Form

e-Signature Pad Using Jquery AJAX and PHP Signature Pad is a jQuery module that undertakings HTML5 canvas part and javascript to make an adaptable and smooth Signature Pad on your site page and application. There are a lot of approaches to permit clients to attract a mark a program window, many including sharp jQuery modules. Everything is going advanced and this is the future we should all anticipate. Here are the best advanced mark modules I’ve found.

Live Demo   Download Source Code

my_sign.php

<!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>
		
		
		<style type="text/css">
			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-ingo {
				font-family: cursive;
				font-size: 12px;
				text-align: left;
				font-style: oblique;
			}
		</style>
	</head>
	<body>

		<h2>Learn Infinity | jQuery Signature Pad & Canvas Image</h2>
		
		<div id="signArea" >
			<h2 class="tag-ingo">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>

save_sign.php

<?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);
?>

 

You May Also Like

About the Author: Ranjith Kumar A

0 0 votes
Article Rating
Subscribe
Notify of
guest
48 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
ashish
3 years ago

Hi ,
can you tell me me. how to reset canvas.

Sreenu
Sreenu
2 years ago

in where i did place that code ?

zahid Ahmed
zahid Ahmed
3 years ago

Hi this is great! How can i send the signature as a PDF file i Email.

jefferson
jefferson
3 years ago

hi i need the file save_sign.php can u please send me that file .

thanks in advance

gurinder
gurinder
3 years ago

Uncaught ReferenceError: SignaturePad is not defined when use –
var signaturePad1 = new SignaturePad(sign1_canvas);
signaturePad1.clear();

Help.

Jim
Jim
3 years ago

Can you show an example of how you would create a clear button to clear the canvas?
What would the jquery look like for this button?

Abie
Abie
3 years ago

how if i want send to database, i try its only send name file without extention (.png), so i can’t view the signature from table.

Justin
Justin
3 years ago

Hi Admin, i tried to clear the canvas using yr method but it says Uncaught ReferenceError: SignaturePad is not defined…Besides, after i managed to clear the canvas using

var c = document.getElementById(‘myCanvas’);
var ctx = c.getContext(‘2d’);
ctx.clearRect(0, 0, 200, 100);

and started to draw, the old drawing reappears, what should i do??

Dev
Dev
3 years ago

Clear Canvas not working

shabuddin
shabuddin
3 years ago

hi
These is the code for clear canver

(“#btnClearSign”).click(function(e){
$(‘#signArea’).signaturePad().clearCanvas ();
});

Arun K
Arun K
2 years ago
Reply to  shabuddin

This works perfect

Even Stephen
Even Stephen
2 years ago
Reply to  shabuddin

Worked smooth as silk AFTER I made a ever so slight adjustment. I copy/pasted and it didn’t even complete the sign area to show up. This worked smoothly

$(“#btnClearSign”).click(function(e){
$(‘#signArea’).signaturePad().clearCanvas();
});

Anzel Botha
Anzel Botha
2 years ago
Reply to  Even Stephen

Hi Evan
where did you put the code? My button code looks like this…
<button id="btnClearSign"
>Clear });?>
>Clear

Mike
Mike
3 years ago

Great job

Sherwin
3 years ago

Hi

How do you check if canvas if blank/empty ?

Eugene
Eugene
3 years ago

Please help my canvas is not showing, when i save it saves a blank image

bakri
bakri
3 years ago

how i can save this signature in database

bakri
bakri
3 years ago

how i can save this signature in the database

sanyam
2 years ago
Reply to  bakri

Like an image you this signature in the database

David
David
3 years ago

What if I needed to insert two canvas and saving both signatures?
I managed to make them work, however the script will only generate the first signature.

emmanuel Siphuma
2 years ago

Hi I’m trying to download the source code, but I couldn’t, every time I click download button, it open advertising pages……. Please I really need this code

akshay
akshay
2 years ago

How do you check if canvas if blank/empty ?

sanyam
2 years ago
Reply to  akshay

pls let me know if you solve it

Nestor Orjuela
Nestor Orjuela
2 years ago

How change the blue color?

Anoos
Anoos
2 years ago

hello dear, I just want to know one thing that, how to save the result of canvas in xampp or wampp server. kindly help me to solve this query

Jumi63
Jumi63
2 years ago

Could you tell me how to delete the grey line that appears in the sign canvas ?
Thx 😉

Steve
Steve
2 years ago

Hi can someone link me to a d/l that works as all I get on the download source page is page not found 🙁

John
John
2 years ago

I want to change the file name ($filename = md5(date(“dmYhisA”));) and make it dynamic
can you help me
thanks in advance

adam
2 years ago
Reply to  John

$filename = ‘signature_’.time();

omar
omar
2 years ago

how i can save this signature in the database

Nestor Orjuela
Nestor Orjuela
2 years ago

Hello in windows 8 and 10 with touch scream doesnt work… why?

sanyam
2 years ago

I want to validate it

Peter Smith
Peter Smith
2 years ago

I can’t download the source code as the link just goes to advertising…

Can this be fixed?

magta
magta
2 years ago

wont save on ios or safari? am using in ipad but it wont save. for android and windows its working. need help

Andres
2 years ago

Here is the clear working script

Borrar

$(document).ready(function() {$(‘#btnClearSign’).click(function(e){$(‘#signArea’).signaturePad().clearCanvas ();});});

Aaron
Aaron
2 years ago

The source files can be downloaded by clicking the SKIP THIS AD button top right on the advertising page

This takes you to a download page on mediafire

vineeth
vineeth
1 year ago

Hi ..Very Good Process this !!

Is there any way to prevent the blank signature uploading to the folder?
If anything, Please update.
Thanks!

vineeth
vineeth
1 year ago

Hello

Thanks for your help!
Is there any to prevent the blank signature posting to the folder ?

Shaju
Shaju
1 year ago

Hi, is it possible to collect signature of more than one person?

Phyzerbert
1 year ago

How can I check if the sign area is empty?
I want to submit form without sign also.

shailendra
shailendra
1 year ago

HI,
Could you please tell me how to put signatures in input type of hidden in the form using jquery in it.

nur atiqa
nur atiqa
1 year ago

how can i save the signature in to database mysql?

nur atiqa
nur atiqa
1 year ago

how can i save the signature in to database mysql? is there anyone who have done that?

janvier
janvier
11 months ago

all options, including pen color are in: css/jquery.signaturepad.js (at the bottom)

anjana
anjana
11 months ago

i want to use this along my form its storing in that folder i want to show it along with other form data in database

Edson Cordeiro
Edson Cordeiro
8 months ago

How can i clear the sign field without reset the entire form

48
0
Would love your thoughts, please comment.x
()
x