ทำแบบฟอร์มที่บันทึกลายเซ็นได้ (Signature Pad)

ลองกรอกแบบฟอร์มพร้อมเซ็นชื่อด้านล่างครับ

ชื่อ – นามสกุล :
ลายเซ็น :	โปรดเซ็นชื่อที่ช่องว่างด้านล่าง [ ลบลายเซ็น ]

ไฟล์รูปลายเซ็นในระบบ

$("#btnClearSign").click(function(e){ $('#signArea').signaturePad().clearCanvas(); });

$("#submit_bt").click(function(e){

// Validate Field ที่กรอกเข้ามา fullname_fld = document.getElementById('fullname');

if (fullname_fld.value == "") { alert( "โปรดกรอก ชื่อ - นามสกุล ด้วย" ); fullname_fld.focus(); return false ; }

if (isCanvasBlank(document.getElementById('sign-pad'))) { alert('โปรดเซ็น ลายเซ็น ด้วย'); return false ; }

// บันทึกลงฐานข้อมูล html2canvas([document.getElementById('sign-pad')], { onrendered: function (canvas) { var canvas_img_data = canvas.toDataURL('image/png'); var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, "");

//ajax call to save image inside folder $.ajax({ url: 'save_sign.php', data: { img_data:img_data , fullname:fullname_fld.value }, type: 'post', dataType: 'json', success: function (response) {

//alert(response.id); // ใช้ response.ชื่อ Key ในการดึงข้อมูลที่ส่งกลับมา //window.location.href = response.file_name;

alert("บันทึกข้อมูลเรียบร้อยแล้ว !!\n\nข้อความส่งกลับ : " + response.id);

window.location.reload();

} }); } }); });

function isCanvasBlank(canvas) {

txt_tmp = canvas.toDataURL();

//console.log(canvas.toDataURL());

if((txt_tmp.length == 1162) | (txt_tmp.length == 1178) | (txt_tmp.length == 586) | (txt_tmp.length == 594) | (txt_tmp.length == 642) | (txt_tmp.length == 654)) return true; else return false;

}