I've run into a problem and I've only come across one other person who's having the same problem, but they're also still lost. I'm using szimek's signature pad and when I sign with a mouse or track pad, the image data uploads to my /upload folder. But when I sign with my finger on any touch surface (ipad, iphone, android, my microsoft pc's touchscreen) in any browser, it results in the data not uploading to my /upload folder. Or anywhere, for that matter.
Html:
Employee Name: <input type="text" name="employee1" /><br>
<label>Signature:</label>
<div id="signature-pad-1" class="m-signature-pad" style="margin-top:12px; margin-bottom:12px;margin-left:12px;margin-right:12px;">
<div class="m-signature-pad--body">
<canvas></canvas>
<input id ="siginput1" type="hidden" name="signature1" value=''/>
</div>
</div>
<br>
<span id="clear1" onclick="clear1();" style="border: 1px solid #e8e8e8;border-radius:5px;cursor:pointer;padding:2px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.27), 0 0 24px rgba(0, 0, 0, 0.08) inset;">Clear</span>
<br><hr><br>
PHP for handling the signature:
$signature1 = $_POST['signature1'];
$encoded_image1 = explode(",", $signature1)[1];
$decoded_image1 = base64_decode($encoded_image1);
$sig1_new_name = uniqid('', true) . '.png';
file_put_contents('uploads/' . $sig1_new_name, $decoded_image1);
$message .= "<div><h3>Signature: </h3><div><img src='http://site/uploads/" .$sig1_new_name. "' width='300' height='150'><br>$employee1</div></div><hr>";
I'm using szimek's javascript for this:
and this:
It's killing me. I must be overlooking something in the javascript, but no one else seems to be having this issue, so perhaps it's in my implementation of the js. Any help would be greatly appreciated! Thank you.