We have an invoice for customers to sign. Their signature is then changed from Signature Pad to .png file in a folder called /images in the root of the html folder. They can sign it but it won't save an image or add the information from the randomly generated number into the database. It says signature saved, but when i open the directory it is still empty. I copied the code from here: http://samratparida.blogspot.com/. The code is actively running here http://www.hispeedwarez.com/crud/sign/index.php. It's just not saving the signatures in the /images directory nor is it inputting the file names into the database.
I have tried to catch the error but there is none showing anywhere. I have also added "Echo " to each part of the script but none of them echo to the page so I can't see if it is running where it is messing up.
or die("unable to open file for writing");
and
I have error_log set in the ini file along with error_reporting = E_ALL | E_STRICT
but nothing is in there either.
I also checked apache2 error log /var/log/apache2/error.log and it doesn't show anything either.
signature pad code is here for index.php
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Signature Pad</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(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 < clickX.length; i++) {
context.beginPath();
if (clickDrag[i] && i) {
context.moveTo(clickX[i - 1], clickY[i - 1]);
} else {
context.moveTo(clickX[i] - 1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
/** Save Canvas **/
$("#saveSig").click(function saveSig() {
var sigData = canvas.toDataURL("image/png");
$("#imgData").html('Thank you! Your signature was saved');
var ajax = XMLHttpRequest();
ajax.open("POST", 'post-html.php');
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(sigData);
});
/** Clear Canvas **/
$("#clearSig").click(function clearSig() {
clickX = new Array();
clickY = new Array();
clickDrag = new Array();
canvas.width = canvas.width;
canvas.height = canvas.height;
});
/**Draw when moving over Canvas **/
$('#signaturePad').mousemove(function (e) {
if (paint) {
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
/**Stop Drawing on Mouseup **/
$('#signaturePad').mouseup(function (e) {
paint = false;
});
/** Starting a Click **/
function addClick(x, y, dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
$('#signaturePad').mousedown(function (e) {
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
});
</script>
</head>
<body>
<center>
<fieldset style="width: 435px">
<br/>
<br/>
<div id="signaturePad" style="border: 1px solid #00C; height: 100px; width: 400px;"></div>
<br/>
<button id="clearSig" type="button">Clear Signature</button>
<button id="saveSig" type="button">Save Signature</button>
<div id="imgData"></div>
<div id="imgData"></div>
<br/>
<br/>
</fieldset>
</center>
</body>
</html>
second page that adds the signature to the database and writes the signature image to a file is here
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 = '/var/www/html/crud/sign/images/' . $imageName;
echo("file is being opened");
$fp = fopen("$filepath", "wb") or die("unable to open file for writing");
fwrite($fp, $unencodedData);
fclose($fp);
echo ("file has been written");
//Connect to a mySQL database and store the user's information so you can link to it later
$link = mysql_connect('localhost','db_username', 'db_password') OR DIE(mysql_error);
mysql_select_db("sign", $link);
mysql_query("INSERT INTO customer (`session`, `image_location`) VALUES ('$session_id', '$imageName')") OR DIE(mysql_error());
mysql_close($link);
}
?>
The customer should be able to sign on the signature pad. When they click save signature, the signature should be written to the /images folder in a .png file. Then the images name should be written to the customer database so we can pull those and put them back on the invoice later on.
Right now they can sign the signature pad and it says it was saved, but nothing is saved and no signature image is being put into the /images folder.
Thanks for all your help in advanced!
-Matt
