Rodrigo Brito

Utilizando jquery.signature e Laravel

A origem deste post foi em razão de uma necessidade em um sistema de geração de ordens de serviço, onde no final o cliente assina sinalizando a execução do serviço.

Abstraindo a parte de instalação do Laravel (este é um post de ajuda para quem já o usa), irei detalhar a seguir o modo que utilizei para capturar a imagem da assinatura, enviar o canvas para um diretório específico e salvar o caminho da imagem no banco de dados. Esta parte foi até que simples, diversos tutoriais estão disponíveis (maioria em inglês), mas quando o cliente foi testar, foi justamente onde eu infelizmente não previ, no celular! A biblioteca utilizada, jquery.signature (http://keith-wood.name/signature.html) estava pronta somente para eventos de mouse, ainda que houvesse um detalhe sobre touch, passou desapercebido...

A sequência que utilizei foi a seguinte, tendo como dependência inicial, o jQuery, já em uso:

1 - Instalar a dependência jQueyUI:

npm i jquery-ui

2 - Baixar jquery.signature.js do site jQuery UI Signature, descompactar e colar de acordo com o modelo de uso para os assets (deixo tudo em ressources e controlo com o webpack).

3 - Para finalizar os arquivos necessários, baixar a lib jQuery UI Touch Punch:

npm i jquery-ui-touch-punch

Depois dos arquivos necessários para a captura de eventos, que é a parte mais complexa, com uma coluna textual, tipo string, já preparada para armazenar o caminho da imagem gerada da assinatura na tabela que representa a entidade "ordem de serviço" no banco de dados (pode ser pequena), no arquivo de controle, utilizei o seguinte código (somente para este item para não deixar grande o post):

O nome do input eu defini como "costumer_signature" e o caminho para imagem foi o signatures. No final, caso exista o dado, o objeto $data que contém os dados da requisição já validados recebe como valor o nome do arquivo para o índice que representara a coluna no banco. Deixei somente no método de update, pois uma ordem de serviço não é criada já assinada.

Na camada de visualização, onde utilizo o blade, o input ficou da seguinte forma:

O canvas será adicionado na div de id "costumer_sig". O input fica oculto, receberá o valor a partir da inicialização do objeto da lib. Há a opção de limpara a assinatura ao clicar no botão. Deixei também uma div acima deste código, com a imagem da assinatura caso já exista, permitindo assim a atualização. O produto final são relatórios de visualização, que só apresentam a imagem.

Agora, por último, somente um caquinho de código, utilizando o jQuery para instanciar o objeto signature, que é quem realiza todo o processo:

As configurações que adotei foram as padrões.

Agora, para isso tudo "funfar" corretamente no celular, utilizei a seguinte ordem de carregamento de arquivos, com o jQuery por padrão no master:

Esse último arquivo, sisgnature.js foi o que deixei o "caquinho" de código (prefiro deixar tudo separado). Estes assets também são carregados somente na página de edição de ordem de serviço, em uma seção preparada para scripts adicionais.

O resultado final foi o seguinte:

Ao atualizar, vai na requisição em base64, onde é convertido em imagem e armazenado no diretório:

Celular, de boa (o simulador de touch está ativado)!