我遇到了一个问题,我只遇到了一个遇到相同问题的人,但他们仍然丢失。我正在使用Szimek的签名垫,当我使用鼠标或轨道垫签名时,图像数据将上传到我的/上传文件夹。但是,当我在任何浏览器中用手指在任何触摸表面(iPad,iPhone,Android,Microsoft PC的触摸屏)上签名时,它会导致数据未上传到我的/上传文件夹。或任何地方,就此而言。
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的实施。任何帮助将不胜感激!谢谢。
您可能会遇到mouseup
通常需要触发实际鼠标的问题。您要用于触摸输入的事件是touchend
;在现有线程中已经进一步讨论了这一点。您的小提琴将成为:
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);
我根本不确定,但是我认为javascript中的 mouseup 事件与触摸设备不起作用,您可以添加触摸端事件。这应该在触摸设备上工作。希望我能为您提供帮助,无论如何好运:)