2

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:

signature_pad.min.js

and this:

app.js

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.

W0V3N
  • 47
  • 7
  • I don't see any way for the user to post the form. I'd check your JavaScript is working properly on mobile. – miken32 Dec 10 '16 at 00:14

2 Answers2

4

You might be running into the problem that mouseup, often times, requires an actual mouse to be triggered. The event you would want to use for touch input is touchend; this has been discussed further in an existing thread. Your fiddle would become:

var wrapper1 = document.getElementById("signature-pad-1"),
    canvas1 = wrapper1.querySelector("canvas"),
    signaturePad1;

var siginput1 = document.getElementById("siginput1")

function handler(event) {
    if (signaturePad1.isEmpty()) {
        siginput1.value = '';
    } 
    else {
        siginput1.value = signaturePad1.toDataURL('image/png');
    }
});

canvas1.addEventListener("mouseup", handler);
canvas1.addEventListener("touchend", handler);

function clear1() { signaturePad1.clear(); }

function resizeCanvas(canvas) {
    var ratio =  window.devicePixelRatio || 1;
    canvas.width = 250;
    canvas.height = 150;
}

resizeCanvas(canvas1);
signaturePad1 = new SignaturePad(canvas1);

$("#clear1").click(clear1);
gyre
  • 16,369
  • 3
  • 37
  • 47
  • Man, I love you. That was the exact issue. Thank you so much. I've been stressing over this all day. I'm super new to javascript, so this is ridiculously helpful. Again, thank you! – W0V3N Dec 10 '16 at 00:21
3

I'm not sure at all, but I think that the mouseup event in javascript doesn't work with touch devices, you could add the touchend event though. This one should work on touch devices. Hope I could help, good luck anyway :)

Thomas Kim
  • 226
  • 1
  • 6