Obter assinatura do usuário com jQuery e HTML

Coletar assinatura do cliente: Plugin jQuery

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!

8 respostas a “Obter assinatura do usuário com jQuery e HTML”

    1. Bom dia!

      Sim, fica idêntica, sem percas aparentes. Você pode também optar por salvar em formato imagem para que o resultado seja persistente e imutável.

      1. Olá Jonatan,
        Excelente artigo!

        Uma dúvida, onde encontro o local exato para documentação, no jQuery, para o .signature() ?

        Procurei aqui, porém não obtive exito.

    1. Boa tarde Renan. Então, se você colocar num site teoricamente já deveria funcionar normalmente. Talvez esteja faltando alguma biblioteca relacionada ao touch screen. Dê uma olhada no site do componente.

Deixe uma resposta

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

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.