Añadir campo firma en nuestros formularios web.

Publicado por Quanticbyte en 27 febrero, 2019
Categorias : Dosis Diaria

Implementación de epad-ink en web para recogida de firmas.

Las pruebas y testeos los he realizado con un epad-ink, modelo: VP9805.

Leeros la nota final si lo que queréis es implementar un sistema de firma baratillo en vuestra web app o proyecto.

Empezamos …

Antes de nada, tenemos que instalar los controladores en la máquina que usará el dispositivo, para eso prefiero usar un canvas puro y duro, pero bueno los clientes son como son.

Al instalar los drivers nos pedirá (si no lo tenemos) actualización e/o instalación del Microsoft framework correspondiente. Una vez instalados, tenemos que instalar las extensiones en los navegadores Chrome y Firefox (pasamos de IE).

  • En Firefox se tiene que instalar la extensión que nos ofrece el fabricante SigCaptureWeb.exe y activarla.

Una vez realizados estos pasos miramos el correcto funcionamiento con la url que nos proporciona el fabricante para el testeo.

https://www.esignemcee.net/SigCaptureWeb/sign_chrome_ff_sigcapturewebsdk.html

Al pulsar el botón sing tendría que aparecernos el cuadro de dialogo de la signatura, otra cosa que no me ha gustado… El tema de que lo haga con pop-ups ☹.

Probamos con los dos navegadores.

Vamos a copiar el código de la web y ponerlo en local para ver bien como lo hace.

Al analizar el código lo primero que vemos es que lleva incorporado su Jscript y los formularios para mostrarnos la información.

Primero analizamos como llama la pantalla de captura, para eso crearemos una página html limpia e iremos implementando lo que necesitemos.

Pagina con botón para firmar:

Pondremos el script en un documento a parte y lo llamaremos desde nuestra página.

Lo primero que vemos es que al cargar el <body> llama a la función <bodyonload=”ClearFormData()”>

Miremos en el Js esta función

Lo único que hace es mostrarnos el texto en los dos formularios, nada de especial.

Vamos al meollo del asunto, al pulsar el botón sign.

Se llama a la función StarSign(), que es la que nos interesa.

Vamos a probar en nuestro código solo esta parte.

El botón con la función StartSign(), acordémonos de poner el onclick=”StartSign()” a nuestro botón para que nos lance la función.

Nos arroja un mensaje de TypeError: canvasObj is null

Creamos en el body nuestro canvas ‘cnv’

Y le damos al botoncito 😀

Nos lanza un error: ReferenceError: SignResponse is not defined

Vemos que en la línea (del Js):

document.addEventListener(‘SigCaptureWeb_SignResponse’, SignResponse, false);

Se llama a la función SignResponse.

Que copiaremos también a nuestro Js

Coge los parámetros de SigCaptureWeb_msgAttri los convierte a objeto y llama a la función SetValues pasando como parámetro el objeto, y el ancho y alto del canvas ‘cvs’

Copiemos la función SetValues en nuestro Js y analicémosla.

Nos quedamos con nuestro html:

I nuestro archivo .js

Vamos a ordenar un poco el Js y de paso lo acortamos un poco:

Así nos vale 😉

Podemos poner la imagen a nuestro html para que se vea que se ha firmado, y pasar los datos obj.imageData a un campo oculto de formulario para mandar la imagen… como texto.

Si quisiéramos guardar la imagen enviada desde php podemos usar:

Vamos a testearlo todo:

Con Laragon o Xampp o el que uséis montamos una carpeta de prueba y ponemos nuestro archivo index.html

Tenemos el canvas (en negro, de la firma), el botón para firmar, un textarea donde cogeremos el data de la firma y el botón de mandar la firma a archivo.

Primero, a la función que llama el botón firma, le añadiremos una línea para que nos borre el contenido del textarea.

En nuestro Js crearemos una nueva función mandarFirma().

Que nos mandara el formulario.

Y finalmente nuestro archivo .php que recepcionará los datos del formulario.

Lo primero, dentro de la función (la retocada por nosotros),

SignResponse(event), en la parte donde copiamos imagen a canvas, añadimos:

Que nos copiará el contenido de obj.imageData a nuestro textarea.

Ejecutando tendríamos:

La firma en nuestro canvas y el textarea con la información que vamos a mandar al .php para que nos genere el .jpg.

En el archivo guarda_imagen.php:

¡Y, al pulsar en firma y mandar los datos… Voila! Tenemos el archivo .jpg en nuestra ruta 😉

I asta aquí todo … os dejo los codigos para que testeeis 😉

Descarga

Nota del Autor :

Se tiene que decir que encuentro carísimo el tener que implementar una firma en un documento con este sistema, el aparato es caro, las pruebas las he realizado con el modelo VP9805 (253 €, una burrada!! ), además necesita de plugins para el navegador y drivers para el equipo, cosa que te ata a usar un navegador en concreto e instalar drivers de terceros en el equipo.

Mi idea original fue poner un canvas en el formulario en el que se pudiese dibujar y con una tableta grafica (de las más baratas, 20 € en amazon) poder firmar sobre el canvas.

Si os interesa en otro post lo cuento!

Sé el primero en comentar


Deja un comentario






Acepto la política de privacidad