En este post te mostraré cómo solicitar la firma a un usuario desde la web usando JavaScript, de modo que el usuario pueda firmar como si lo hiciera en una hoja de papel.

Después podremos enviar esa firma al servidor, descargarla, colocarla en un documento, etcétera.

Documento con firma de usuario con JavaScript - Imprimir o guardar como PDF

Documento con firma de usuario con JavaScript – Imprimir o guardar como PDF

Quiero que quede claro que vamos a solicitar la firma manuscrita usando programación en la web a través de un navegador. Para ello vamos a usar el canvas.

Nota: una vez que la firma haya sido dibujada puedes enviarla a PHP, Java, Node, etcétera. En el ejemplo te mostraré cómo descargarla como imagen y colocarla en un documento.

Preparando el canvas

No voy a profundizar en cómo hacer que el usuario dibuje en el canvas, pues eso ya lo expliqué en mi post de un prototipo de Paint en JavaScript. Así que te invito a leerlo para que no tengas dudas de lo que haremos.

A continuación te muestro el canvas con los botones que van a permitir limpiarlo, descargar la firma como imagen o generar un documento con la firma.

Por cierto, recuerda que ya he explicado cómo limpiar el canvas y cómo descargar el canvas como imagen. Aquí solo me enfocaré en recoger la firma del usuario con JavaScript.

Dibujar en canvas

Te dejo el código encargado de permitir que se dibuje con el mouse, aunque ya lo expliqué a profundidad en otro artículo.

Limpiar canvas

Al inicio de todo colocamos el color de fondo en blanco para que el canvas se vea limpio. También escuchamos el clic del botón que limpia el lienzo e invocamos a esa función.

Descargar firma como imagen

Veamos el primer caso en el que el usuario quiere descargar su firma como una imagen. El código se ve así:

Y con esto el usuario podrá descargar la firma manuscrita. Te repito que lo de convertir el canvas a imagen ya lo expliqué en otro post, regresa a los párrafos anteriores a buscarlo si tienes dudas.

Generar documento con firma de usuario

Ahora veamos otra cosa interesante. Una vez que el usuario ha firmado usando el mouse podemos pasar esa firma a un documento HTML e incrustar esa imagen. Primero veamos la plantilla del documento en cuestión:

Es un simple documento que tiene una imagen al final. Esa imagen tiene el id firma. Ahora quiero que te fijes en el script, mismo que se ve así:

Este documento no debería abrirse por sí mismo, sino que debería tener una ventana padre; para ello es la comprobación de window.opener.

En caso de que exista ese opener entonces obtenemos el elemento de la imagen y colocamos su src como lo que regrese la función obtenerImagen del padre, y después imprimimos.

Ahora veamos la función obtenerImagen del padre, misma que se ve así:

La ventana hija va a solicitar al padre la imagen, y como en el padre tenemos el canvas entonces simplemente le enviamos la firma del usuario en base64, misma que será colocada en la imagen.

Todo esto ya lo he explicado a detalle en mi post de comunicación entre ventanas de JavaScript.

Poniendo todo junto

Solicitar firma de usuario con JavaScript y HTML en la web

Solicitar firma de usuario con JavaScript y HTML en la web

Te he mostrado y explicado el código más importante para solicitar la firma del usuario y después guardarla como imagen o generarla en un documento.Ya con esto puedes crear tus propios proyectos o adaptar esto según tus necesidades.

Si quieres explorar el código completo te lo dejo en GitHub, y también te dejo una demostración en línea por aquí.

Por cierto, puedes hacer cualquier otra cosa con la imagen. En mi blog tengo un post donde explico cómo enviar un canvas a PHP. También podrías generar el PDF directamente o imprimirlo. Todo queda en ti.

Para terminar te dejo con más tutoriales de JavaScript.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 2,601 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: