Digital Signature Pad

<!DOCTYPE >

<head>
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” />
<title>Signature Pad</title>

http://code.jquery.com/jquery-latest.min.js

$(document).ready(function () {
/** Set Canvas Size **/
var canvasWidth = 400;
var canvasHeight = 100;

/** IE SUPPORT **/
var canvasDiv = document.getElementById(‘signaturePad’);
canvas = document.createElement(‘canvas’);
canvas.setAttribute(‘width’, canvasWidth);
canvas.setAttribute(‘height’, canvasHeight);
canvas.setAttribute(‘id’, ‘canvas’);
canvasDiv.appendChild(canvas);
if (typeof G_vmlCanvasManager != ‘undefined’) {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext(“2d”);

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

/** Redraw the Canvas **/
function redraw() {
canvas.width = canvas.width; // Clears the canvas

context.strokeStyle = “#000000”;
context.lineJoin = “miter”;
context.lineWidth = 2;

for (var i = 0; i
</head>
<body>
<center>
<fieldset style=”width: 435px”>
<br/>
<br/>

<br/>
<button  id=”clearSig” type=”button”>Clear Signature</button>&nbsp;
<button id=”saveSig” type=”button”>Save Signature</button>

<br/>
<br/>
</fieldset>
</center>
</body>
</html>

2.post-html.php
==================

<?php
if (isset($GLOBALS[“HTTP_RAW_POST_DATA”]))
{
$session_id = $_SERVER[‘REMOTE_ADDR’];
// Get the data
$imageData=$GLOBALS[‘HTTP_RAW_POST_DATA’];

// Remove the headers (data:,) part.
// A real application should use them according to needs such as to check image type
$filteredData=substr($imageData, strpos($imageData, “,”)+1);

// Need to decode before saving since the data we received is already base64 encoded
$unencodedData=base64_decode($filteredData);

//echo “unencodedData”.$unencodedData;
$imageName = “sign_” . rand(5,1000) . rand(1, 10) . rand(10000, 150000) . rand(1500, 100000000) . “.png”;
//Set the absolute path to your folder (i.e. /usr/home/your-domain/your-folder/
$filepath = “images/” . $imageName;

$fp = fopen(“$filepath”, ‘wb’ );
fwrite( $fp, $unencodedData);
fclose( $fp );

//Connect to a mySQL database and store the user’s information so you can link to it later
$link = mysql_connect(‘localhost’,’root’, ”) OR DIE(mysql_error);
mysql_select_db(“test”, $link);
mysql_query(“INSERT INTO customer (`session`, `image_location`) VALUES (‘$session_id’, ‘$imageName’)”) OR DIE(mysql_error());
mysql_close($link);
}
?>

 

Credit : http://samratparida.blogspot.com/2014/08/create-signature-pad-with-save-on.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s