in head section of page
<!-- you load jquery somewhere above here ... --> <!--[if lt IE 9]> <script type="text/javascript" src="libs/flashcanvas.js"></script> <![endif]-->in body section
<form action="save-sign.php" method="post"> Sign here <div id="signature"></div> <input type="hidden" name="hdnSignature" id="hdnSignature" /> <input type="button" id="btn_submit" value="Submit Form" /> </form>
<script>
$(function () {
'use strict';
var $sigdiv = $("#signature");
$sigdiv.jSignature();// inits the jSignature widget.
//save data to hidden field before submiting the form
$('#btn_submit').click(function () {
var datapair = $sigdiv.jSignature("getData", "image");
$('#hdnSignature').val(datapair[1]);
//now submit form
document.forms[0].submit();
});
});
</script>
and save-sign.php file should be like this<?php $sign = ''; if(isset($_POST['hdnSignature'])) { $sign = $_POST['hdnSignature']; $path = "path to file.png"; $sign = base64_decode($sign); //convert base64 file_put_contents($path, $sign); //save to file //all done } ?>