Coletar assinatura do cliente: Plugin jQuery

Obter assinatura do usuário com jQuery e HTML

Está precisando obter assinatura do seu usuário/cliente na sua página Web? Existe um plugin em JavaScript que facilita a sua vida na hora de capturar assinaturas, até mesmo através do celular (rodando em navegadores).

O plugin que vou demonstrar neste post é bem completo, e funcionou perfeitamente para minhas necessidades (coletar a assinatura do cliente através do smartphone).

Obter assinatura do cliente: Plugin jQuery
Obter assinatura do cliente: Plugin jQuery

Sobre o plugin para obter assinatura

O plugin é o jQuery UI Signature, você pode fazer o download aqui: http://keith-wood.name/signature.html. Na própria página do plugin você já pode testar e ver como ele funciona , você pode até arriscar fazer a sua assinatura.

O uso do plugin é bem simples, bastando instalar ele no seu projeto, criar uma DIV pra servir de contêiner e então, inicializar através de um comando. Logo abaixo eu demostro como utilizar o plugin.

Instalação do Plugin de Coleta do Assinatura
Instalação do Plugin de Coleta do Assinatura

Instalando o Plugin

A instalação do plugin para obter assinatura no seu projeto é bem simples, bastando importar para a página desejada os arquivos baixados. Note que é necessário que você utilize o jQuery e o jQuery UI na sua página para que o plugin funcione. Conforme a imagem acima, entenda para que serve cada um dos arquivos importados:

  1. jQuery e jQuery UI: Frameworks utilizados pelo plugin para que ele funcione;
  2. jquery.signature.min.jsjquery.signature.css: São os arquivos de funcionamento (motor) e layout do plugin;
  3. jquery.ui.touch-punch.min.js: Necessário somente se você for capturar a assinatura em dispositivos touch screen;
  4. excanvas.js: Necessário para utilizar o plugin no Internet Explorer;
  5. Dimensão da área de assinatura: Necessário para que o layout seja definido (altura e largura da área de assinatura);

O arquivo obterAssinatura.js é o arquivo que vamos utilizar neste tutorial para demonstrar o uso.

Usando o Plugin

Para inicializar o plugin, o comando é bem simples, bastando você fazer assim:

Inicializando Plugin de Assinatura
Inicializando Plugin de Assinatura

Agora, ao abrir a página temos este resultado:

Plugin de coleta de assinatura em funcionamento.
Plugin de coleta de assinatura em funcionamento.

Como guardar a imagem após obter a assinatura?

Você tem diversas opções para guardar a assinatura coletada. Eu, por uma opção de projeto, guardei o JSON que o plugin fornece. Assim, é possível re-desenhar a assinatura de uma forma mais simples para posterior visualização.

Para que o plugin lhe forneça o conteúdo da assinatura em JSON, você tem de fazer assim:

Obtendo Conteúdo da Assinatura em JSON
Obtendo Conteúdo da Assinatura em JSON

O resultado é este quando você clicar no botão “Obter JSON” (que executa o método “toJSON” do plugin:

Conteúdo em JSON da Assinatura
Conteúdo em JSON da Assinatura

Re-desenhando a assinatura à partir do JSON guardado

Para re-desenhar a assinatura à partir do JSON que você guardou anteriormente, basta fazer assim:

Desenhando a Assinatura Partindo do JSON
Desenhando a Assinatura Partindo do JSON

Note na ação do botão “desenhar” que ele executa o método “draw” passando como parâmetro o conteúdo JSON capturado anteriormente.

O que mais é possível fazer?

Até onde vi na página do plugin, dá pra mudar cores, desenhar uma linha guia para coletar a assinatura, e outras coisinhas mais. É possível também exportar o conteúdo diretamente em formato de imagem (base 64) para que você salve em JPEG ou algum outro formato de sua preferência.

Download do projeto de exemplo

Você pode baixar o projeto utilizado neste post através deste link: Baixar.

Sobrou alguma dúvida?

Se sobrou alguma dúvida ou se você precisa de uma ajuda com o plugin, você pode entrar em contato através dos comentários ou diretamente comigo através da página de contato.

Espero ter ajudado, sucesso!

2 thoughts on “Obter assinatura do usuário com jQuery e HTML”

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

This site uses Akismet to reduce spam. Learn how your comment data is processed.