5
Tak więc szukałem tygodniowego skryptu do przechwytywania podpisów, który działa i zapisze podpis w MySQL, a ja w końcu znalazłem to, czego chcę, ale są 2 problemy.Nie mogę uzyskać html5 Podpis podpisu na płótnie do przesłania do bazy danych
Nie mogę określić, dlaczego płótno nie wyczyści podpisu po naciśnięciu przycisku kasowania.
Nie będzie przesyłać obrazu do MySQL po naciśnięciu przycisku zapisu zapisu.
Ten kod jest dość stary i próbowałem skontaktować się z programistą, ale nie otrzymałem odpowiedzi, więc mam nadzieję, że uda mi się uzyskać pomoc.
Oto 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>
a pozostałe PHP i skrypty:
$(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();
});
});
część 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);
}
?>
Jest wiele rzeczy z tym kodem. Ale dla wyraźnego podpisu musisz dodać procedurę obsługi kliknięcia przycisku, aby wywołać funkcję clear. Ustawienie 'canvas.width = canvas.width' jest hackerem i nie działa we wszystkich przeglądarkach. Zamiast tego użyj 'ctx.clearRect (0, 0, canvas.width, canvas.height)'. Kod do zapisywania podpisu jest podwójny w tym kodzie. – K3N
@ Ken-AbdiasSoftware, więc jeśli dobrze cię zrozumiem, usunąłem canvas.width i canvas.heigh i zastąpiłem ctx.clearRect i dodałem program obsługi do czystego przycisku onClick = "clearSig()" Jeśli to prawda, nadal nie powoduje wyczyszczenia obszaru roboczego. Usunąłem też drugi kod podpisu, ale nadal nie zapisuję go w databse. Nie jestem pewien, co zrobić z tą sekcją ajax.open ("POST", "http://www.twoja-domena.com/folder/post-html.php"); czy post-html.php ulega zmianie lub pozostaje? – user2447848
OK, dodałem częściową odpowiedź. – K3N