Aprende a crear un bloc de firmas para dispositivos móviles en cordova.

Creando un pad de firmas con JavaScript en Cordova

Las firmas son importantes tanto para la identificación legal como para la expresión personal. La forma que adopte su firma puede enviar un mensaje sobre su actitud, personalidad y posición.

En el mundo digital, la representación gráfica de una firma es necesaria en muchos entornos y como desarrollador puedes estar preparado para cada locura que tu cliente pueda requerir. En este artículo, aprenderá a implementar un pad de firma simple en Córdoba usando un lienzo.

Requisitos

Para lograr nuestro objetivo, vamos a utilizar la biblioteca de blocs de firmas. Signature Pad es una biblioteca de JavaScript para dibujar firmas suaves. Está basado en un lienzo HTML5 y utiliza una interpolación de curvas de Bézier de ancho variable basada en firmas más suaves. Funciona en todos los navegadores de escritorio y móviles modernos y no depende de ninguna biblioteca externa.

Puede obtener el archivo minificado en el repositorio oficial de Github aquí .

Implementación

Para comenzar, agrega la referencia al script del panel de firmas en su documento con una etiqueta de script:

<script type="text/javascript" src="js/signature_pad.min.js"></script>

Ahora agregue el marcado básico que necesita nuestra aplicación para funcionar. Agregaremos un lienzo donde funcionará la biblioteca, además de dos botones para ejecutar la acción de exportar y restablecer y una etiqueta de imagen para previsualizar el dataURL de la firma.

<canvas id="signature" style="border: 1px solid black;"></canvas>
<img id="preview" />
<br>
<div style="text-align:center;">
    <input type="button" id="export" value="Export"/>
    <input type="button" id="reset" value="Reset"/>
</div>

Nota: como puede ver, el lienzo aún no tiene ninguna dimensión específica (alto o ancho). Usaremos javascript para dar sus dimensiones específicamente como el ancho del dispositivo y una tercera parte de la altura del dispositivo.

El objetivo de usar una biblioteca es olvidarse de manejar cómo se renderizará la ruta en el lienzo, para arreglar la ruta para evitar cualquier firma pixelada. Además, la biblioteca de la tableta de firmas es fácil de usar y permite cambiar muchas de las características básicas que puede necesitar implementar.

El siguiente código debe dar al lienzo sus dimensiones e inicializará el panel de firmas en él. Recuerde que hay muchos métodos y opciones disponibles para cambiar en su inicialización, puede leer más en el repositorio .

var canvas = document.getElementById("signature");
var w = window.innerWidth;
var h = window.innerHeight;

// Como el lienzo no tiene ningún tamaño, lo especificaremos con JS
// El ancho del canvas será el ancho del dispositivo.
canvas.width = w;
// La altura del lienzo será (casi) la tercera parte de la altura de la pantalla.
canvas.height = h/2.5;

var signaturePad = new SignaturePad(canvas,{
    dotSize: 1
});

document.getElementById("export").addEventListener("click",function(e){
    // Siéntete libre de hacer lo que quieras con la imagen
    // como exportar a un servidor o incluso guardarlo en el dispositivo.
    var imageURI = signaturePad.toDataURL();    
    document.getElementById("preview").src = imageURI;
},false);

document.getElementById("reset").addEventListener("click",function(e){
    // Limpia el lienzo
    signaturePad.clear();
},false);

El toDataURLmétodo del panel de firmas devolverá una URL base64 de la imagen, puede usarla para crear un archivo de imagen en el dispositivo (aprenda cómo guardar una imagen base64 en el dispositivo en cordova aquí ) o enviarla a su servidor y crear la imagen allí.

Y estarás listo para empezar. Puede agregar diferentes detectores de eventos en el documento a medida que cambia la orientación o el evento de cambio de tamaño para cambiar las dimensiones de su lienzo.

Conclusión

Con Signaturepad.js no necesitamos preocuparnos por cómo se dibujará la línea en el lienzo o cómo el usuario mueve el lápiz táctil (o el dedo) en la pantalla.

Recuerda que aunque el bloc de firmas funciona bien con el dedo, se  recomienda el uso de un lápiz táctil para mejorar la experiencia del usuario .

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores