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.
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
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í.
Te dejo un vídeo explicando y demostrando lo expuesto en el post: https://www.youtube.com/watch?v=c4Q_Xnd_yUM
Después puedes ver cómo mejorarlo para que funcione en móviles: https://www.youtube.com/watch?v=q47YVQa2TGM
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.
Muchas gracias por el post, me ha sido muy útil.
Una pregunta: Hay alguna manera de detectar que el canvas está vacío. me gustaría hacer esa comprobación antes de enviar la firma a la base de datos
Hola. Yo creo que sí es posible, sería cuestión de modificar el código para comprobar lo que necesita. Si tiene dudas adicionales estaré encantado de brindarle una consultoría en https://parzibyte.me/#contacto
Hola
Como se debe modificar el código para solicitar dos firmas diferentes?
Intenté hacerlo con dos archivos de js y agregando metodos iguales con nombres diferentes en un mismo js, pero no toma en cuenta ambos campos o uno o otro 🙁
Por supuesto, estaré encantado de ayudarle más a fondo. Ofrezco servicios de consultoría personalizados para resolver problemas específicos. Si está interesado, envíeme un mensaje a https://parzibyte.me/#contacto y podemos conversar sobre cómo puedo ayudarle.
Como hacer para que funcione desde una table o un celular, gracias muy amable por tu respuesta
Hola. Gracias por sus comentarios. Si tiene alguna consulta o duda, solicitud de creación de un programa o solicitud de cambio de software estoy para servirle en https://parzibyte.me/#contacto
Saludos!
Y como seria la validacion de la firma en caso de que esta sea obligatoria? como se valida que se haya firmado y que no valla en blanco
Hola. Gracias por sus comentarios. Si tiene alguna consulta, solicitud de creación de un programa o solicitud de cambio de software estoy para servirle en https://parzibyte.me/#contacto
Saludos!
Buenas,
MUY bueno el ejemplo, el caso es que necesitaría guardar el documento firmado en una Ruta en concreto, ¿ habría forma de añadir un botón para guardaren una ruta en concreto ?
Gracias,
Juan Peláez
Hola. Gracias por sus comentarios. Si tiene alguna consulta, solicitud de creación de un programa o solicitud de cambio de software estoy para servirle en https://parzibyte.me/#contacto
Saludos!
Muchas gracias por este tutorial, andaba buscando algo como esto para un app interna de mi empresa y me ha venido genial.
Pero tengo un problema, cuando le doy a generar el documento no me lleva la firma, si lo abro el inspeccionador y refresco me la trae pero como al darle a generar la firma me refresca también la otra ventana me la trae en blanco. Me puedes ayudar?
Hola. Claro, si necesita ayuda puede enviarme un mensaje en https://parzibyte.me/#contacto