Firma en iPad, iPhone, Android con Canvas, AJAX y PHP

Navegando por Internet, me encontré con el trabajo de Thomas J Bradley, donde muestra un plugin funcionando con “canvas” de HTML5, permitiendo a prácticamente cualquier dispositivo moderno con pantallas táctiles (lo e probado en iPad, iPhone y el Xperia X10), dibujar con el dedo, sin embargo, la idea principal del autor es que fuera usado para “firmar” en un formulario.

Estoy seguro que con algunas modificaciones se podría usar para otros fines, pero bueno, por ahora continuemos con esto.

Lo único que hay que hacer es agregar los scripts al encabezado de la página:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!--[if gte IE 7]><script type="text/javascript" src="assets/excanvas-r71.min.js"></script>< ![endif]-->
<!--[if IE 6]><script type="text/javascript" src="assets/excanvas-r3.min.js"></script>< ![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	//esta función es para comprobar el llenado del formulario y que se ponga la firma
	function saveViaAJAX(){
		var testCanvas = document.getElementById("testCanvas");
		var canvasData = testCanvas.toDataURL("image/png");
		var postData = "canvasData="+canvasData;
		var debugConsole= document.getElementById("debugConsole");
		debugConsole.value=canvasData;
 
		var ajax = new XMLHttpRequest();
		ajax.setRequestHeader('Content-Type', 'canvas/upload');
		ajax.send(postData);
	}
</script>

Creamos el formulario:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<form method="post" action="firmaste.php" class="sigPad">
	<label for="name">Escribe tu nombre</label>
	<input type="text" name="name" id="name" class="name"/>
	<p class="drawItDesc">Pon tu firma aqui:</p>
	<ul class="sigNav">
		<li class="drawIt"><a href="#">Firma</a></li>
		<li class="clearButton"><a href="#clear">Limpiar</a></li>
	</ul>
	<div class="sig sigWrapper">
		<div class="typed"></div>
		<canvas id="testCanvas" class="pad" width="250" height="100"></canvas>
		<input type="hidden" name="output" class="output"/>
	</div>
	<p><button onclick="saveViaAJAX();">Guardar</button></p>
  	<p><textarea name="debugConsole" id="debugConsole" rows="3" style="width:100%;">Data</textarea></p>
</form>
<script type="text/javascript" src="assets/jquery.signaturepad.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.sigPad').signaturePad({drawOnly:true});
	});
</script>
<script type="text/javascript" src="assets/json2.min.js"></script>

Y finalmente, la función que convierte en imagen el “canvas”:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

< ?php
if (isset($_POST['debugConsole'])){ // Comprobamos el envio de la información
	// Obtiene los datos del textarea
	$imageData=$_POST['debugConsole'];
 
	// Remueve la cabecera (data:,)
	$filteredData=substr($imageData, strpos($imageData, ",")+1);
 
	// Se codifica antes de guardar los datos
	$unencodedData=base64_decode($filteredData);
 
	// Simplemente se guarda la imagen con el nombre que quieras:
	$fp = fopen( 'test.png', 'wb' );
	fwrite( $fp, $unencodedData);
	fclose( $fp );
 
	 echo "<p>Gracias por tu autografo ".$_POST['name']."
	 <img src='test.png' alt='Firma de ".$_POST['name']."' title='Firma de ".$_POST['name']."' />";
}
else{ header('Location: http://all-jcs.com/demos/firma/index.html'); } // Lo regresamos si no se recibe el formulario.
?>

DEMO:

DESCARGAR.

Un comentario

  1. 08-08-2011
    Juanjo says:

    Excelente!

    Por casualidad no sabrás ¿cómo podría llamar / firmar y recuperar el gráfico de la firma desde python?

    Gracias
    Juanjo

    reply

Deja tu comentario