javascript - 我忽略了什么？当我用鼠标签名时，数据会上传，但是当我用触摸签名时，数据不会上传

Question

我遇到了一个问题，我只遇到过一个遇到同样问题的人，但他们仍然迷路了。我正在使用 szimek 的签名板，当我使用鼠标或触控板签名时，图像数据会上传到我的/upload 文件夹。但是，当我在任何浏览器中用手指在任何触摸表面(ipad、iphone、android、我的微软 pc 的触摸屏)上签名时，都会导致数据无法上传到我的/upload 文件夹。或者任何地方，就此而言。

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:

$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>";

我正在为此使用 szimek 的 javascript:

signature_pad.min.js

还有这个:

app.js

这让我很生气。我一定是忽略了 javascript 中的某些东西，但似乎没有其他人有这个问题，所以也许它在我的 js 实现中。任何帮助将不胜感激!谢谢。

Answer 1

您可能会遇到 mouseup 通常需要触发实际鼠标的问题。您想要用于触摸输入的事件是 touchend ;这已在 an existing thread 中进一步讨论.你的 fiddle 会变成:

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);