Hello everyone,
I have been searching for a way to have a "signature" field(s) on a survey.
There are various threads on the forums, and various solutions to the problem.
One of the threads is this one:
Signature pad for Health Questionnaire
Another such thread is this one:
question type to accept a signature on mobile device
.
User aaskoura also provides the functionality for Android in
OfflineSurveys.com
.
Because of my ignorance on how to do things, I have tried to implement a solution on my own.
I will try and detail the half-way solution I have at the moment, and see if feedback from you can help solve the remaining parts.
Basically, I am using the
szimek signature_pad from github.
The jsfiddle
example is relatively simple
, and was what I used as a starting point.
Now, I have inserted the code below into one of the survey questions.
It does show the signature pad, and a user is able to "sign" on the pad... yet the output is a URI object.
My question: Any suggestions as to capturing this signature object into a png/jpg?
A way to 'capture' it into a file stored along with the server?
All help is greatly appreciated!
Thanks in advance!
Code:
<h2>Signature</h2>
<div class="wrapper"><canvas class="signature-pad" height="200" id="signature-pad" style="background:#E4E4E4;" width="600"></canvas></div>
<div><button id="save">Save Signature</button><button id="clear">Clear Signature</button></div>
<script type="text/javascript" src="/limesurvey/scripts/signature_pad.min.js"></script><script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgb(0, 0, 0)'
});
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');
saveButton.addEventListener('click', function (event) {
//event.preventDefault()
var data = signaturePad.toDataURL('image/png');
// Send data to server instead...
window.open(data);
});
cancelButton.addEventListener('click', function (event) {
event.preventDefault()
signaturePad.clear();
});
});
</script><!-- https://github.com/szimek/signature_pad -->
