5
Vì vậy, tôi đã tìm kiếm tuần cho một kịch bản chụp chữ ký thực sự hoạt động và sẽ lưu chữ ký vào MySQL và cuối cùng tôi đã tìm thấy những gì tôi muốn nhưng có 2 vấn đề.Không thể lấy html5 chữ ký Canvas để gửi đến cơ sở dữ liệu
Tôi không thể hiểu tại sao canvas sẽ không xóa chữ ký khi nhấn nút rõ ràng.
Nó sẽ không gửi hình ảnh tới MySQL khi nhấn nút lưu chữ ký.
Mã này khá cũ và tôi đã cố gắng liên hệ với nhà phát triển nhưng chưa nhận được phản hồi nên tôi hy vọng tôi có thể nhận trợ giúp tại đây.
Đây là html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Signature Pad</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<center>
<fieldset style="width: 435px">
<br/>
<br/>
<div id="signaturePad" style="border: 1px solid #ccc; height: 55px; width: 400px;"></div>
<br/>
<button id="clearSig" type="button">Clear Signature</button>
<button id="saveSig" type="button">Save Signature</button>
<div id="imgData"></div>
<div id="imgData"></div>
<br/>
<br/>
</fieldset>
</center>
</body>
</html>
Và php còn lại và các kịch bản:
$(document).ready(function() {
/** Set Canvas Size **/
var canvasWidth = 400;
var canvasHeight = 75;
/** IE SUPPORT **/
var canvasDiv = document.getElementById('signaturePad');
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if (typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
/** Redraw the Canvas **/
function redraw() {
canvas.width = canvas.width; // Clears the canvas
context.strokeStyle = "#000000";
context.lineJoin = "miter";
context.lineWidth = 2;
for (var i = 0; i < clickX.length; i++) {
context.beginPath();
if (clickDrag[i] && i) {
context.moveTo(clickX[i - 1], clickY[i - 1]);
} else {
context.moveTo(clickX[i] - 1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
/** Save Canvas **/
$("#saveSig").click(function saveSig() {
var sigData = canvas.toDataURL("image/png");
$("#imgData").html('Thank you! Your signature was saved');
var ajax = XMLHttpRequest();
ajax.open("POST", 'http://www.your-domain.com/folder/post-html.php');
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(sigData);
});
/** Clear Canvas **/
function clearSig() {
clickX = new Array();
clickY = new Array();
clickDrag = new Array();
canvas.width = canvas.width;
canvas.height = canvas.height;
}
/**Draw when moving over Canvas **/
$('#signaturePad').mousemove(function (e) {
if (paint) {
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
/**Stop Drawing on Mouseup **/
$('#signaturePad').mouseup(function (e) {
paint = false;
});
/** Starting a Click **/
function addClick(x, y, dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
$('#signaturePad').mousedown(function (e) {
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
});
phần MySQL:
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
$session_id = $_SERVER['REMOTE_ADDR'];
// Get the data
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
// Remove the headers (data:,) part.
// A real application should use them according to needs such as to check image type
$filteredData=substr($imageData, strpos($imageData, ",")+1);
// Need to decode before saving since the data we received is already base64 encoded
$unencodedData=base64_decode($filteredData);
//echo "unencodedData".$unencodedData;
$imageName = "sign_" . rand(5,1000) . rand(1, 10) . rand(10000, 150000) . rand(1500, 100000000) . ".png";
//Set the absolute path to your folder (i.e. /usr/home/your-domain/your-folder/
$filepath = "htdocs/alpha/site6/signature/images/" . $imageName;
$fp = fopen("$filepath", 'wb');
fwrite($fp, $unencodedData);
fclose($fp);
//Connect to a mySQL database and store the user's information so you can link to it later
$link = mysql_connect('localhost','root', 'pwd') OR DIE(mysql_error);
mysql_select_db("trial", $link);
mysql_query("INSERT INTO customer (`session`, `image_location`) VALUES ('$session_id', '$imageName')") OR DIE(mysql_error());
mysql_close($link);
}
?>
Có rất nhiều thứ với mã này. Nhưng đối với chữ ký rõ ràng, bạn cần phải thêm một trình xử lý để nhấp vào nút để thực sự gọi hàm rõ ràng. Đặt 'canvas.width = canvas.width' là một hack và không hoạt động trong tất cả các trình duyệt. Sử dụng 'ctx.clearRect (0, 0, canvas.width, canvas.height)' thay thế. Mã để lưu chữ ký được tăng gấp đôi trong mã này .. – K3N
@ Ken-AbdiasSoftware vì vậy nếu tôi hiểu bạn đúng, tôi đã xóa canvas.width và canvas.heigh và thay thế bằng ctx.clearRect và tôi đã thêm một trình xử lý vào nút rõ ràng của onClick = "clearSig()" Nếu đúng thì nó vẫn không xóa canvas. Tôi cũng đã xóa mã chữ ký tiết kiệm thứ hai nhưng nó vẫn sẽ không lưu vào databse. Tôi không chắc chắn phải làm gì với phần này ajax.open ("POST", "http://www.your-domain.com/folder/post-html.php '); post-html.php có được thay đổi hay ở lại không? – user2447848
Ok, tôi đã thêm một câu trả lời một phần. – K3N