Capturar assinatura usando HTML5 e iPad

165

Alguém sabe como isso pode ser feito? Você usaria um objeto de tela, svg, jQuery, etc?

ipad html canvas svg Mark Richman
fonte

Respostas:

313

Aqui está outra versão baseada em tela com curvas de largura variável (com base na velocidade do desenho): demo em http://szimek.github.io/signature_pad e código em https://github.com/szimek/signature_pad .

amostra de assinatura

szimek
fonte
1
Agradecemos antecipadamente, a melhor assinatura js lib que eu já vi. Não sei por que essa resposta teve apenas 3 votos. github.com/szimek/signature_pad
VAdaihiep
3
Eu gosto que isso não depende de outras bibliotecas js e quão bem parece. Uma observação sobre o uso que me ajudou: adicione uma borda à tela para ver como ela está sendo ajustada. Observe também que as alterações de css na tela fazem algumas coisas loucas; portanto, apenas especifique uma altura e largura no elemento tela, se isso ficar fora de controle.
Brian McGinity
3
Jake, o que exatamente está faltando na sua opinião na documentação fornecida no arquivo LEIA-ME? Estou aberto a sugestões de como melhorá-lo.
szimek 04/04
7
Peço desculpas. Eu acho que sua documentação é realmente adequada. Parecia limitado até que eu percebi o quão fácil isso é usar. Eu o implementei totalmente em um formulário, armazenando no banco de dados e recuperando a página em menos de uma hora. Suponho que estava comparando-o com bibliotecas que eram muito mais complexas de usar como a resposta escolhida acima. Eu não tinha trabalhado com URIs de dados antes, mas é uma maneira verdadeiramente brilhante de lidar com o armazenamento dos dados. Então, eu apenas tive que me acostumar com isso e, em seguida, armazenar e recuperar no banco de dados foi tão ... fácil ... uau. Obrigado novamente!
Jake
1
@RonaldinhoLearnCoding confira o arquivo README - há uma lista de todas as opções possíveis. O que você está procurando é chamado "penColor".
Szimek
60

Um elemento de tela com algum JavaScript funcionaria muito bem.

De fato, o Signature Pad (um plugin do jQuery) já tem isso implementado.

Ben S
fonte
2
Estou surpreso com o quão bonito é este plugin.
Gourneau 14/03/12
Tão perfeito! Obrigado por compartilhar!
sagescrub
Achei esse plug-in realmente difícil de usar de forma não autorizada. Todas as demos eram muito específicas e difíceis de aplicar. Definitivamente como a outra abordagem assinatura pad melhor: stackoverflow.com/a/17200715/76672 Com praticamente nenhuma documentação, eu era capaz de fazê-lo funcionar ...
Jake
18

Aqui está uma versão rapidamente hackeada disso usando SVG que acabei de fazer. Funciona bem para mim no meu iPhone. Também funciona em um navegador da área de trabalho usando eventos normais do mouse.

heycam
fonte
Eu quero saber como desenhar uma assinatura salvos
Yuri Morales
Como salvar a assinatura como arquivo png ou mostrar a assinatura de outra maneira?
Andrus
12

Talvez os dois melhores técnicos de navegador para isso sejam o Canvas, com o Flash como backup.

Tentamos o VML no IE como backup do Canvas, mas era muito mais lento que o Flash. SVG foi mais lento que todo o resto.

Com o jSignature ( http://willowsystems.github.com/jSignature/ ), usamos o Canvas como primário, com fallback para o emulador de Canvas baseado em Flash (FlashCanvas) para IE8 e menos. Eu diria que funcionou muito bem para nós.

ddotsenko
fonte
Isso é muito legal ... eu gosto dos efeitos de suavização. Melhor que eu já vi.
Camden S.