Alguém sabe como isso pode ser feito? Você usaria um objeto de tela, svg, jQuery, etc?
Capturar assinatura usando HTML5 e iPad
Respostas:
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 .
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
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
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
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
@RonaldinhoLearnCoding confira o arquivo README - há uma lista de todas as opções possíveis. O que você está procurando é chamado "penColor".
—
Szimek
Um elemento de tela com algum JavaScript funcionaria muito bem.
De fato, o Signature Pad (um plugin do jQuery) já tem isso implementado.
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
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.
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
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.
Isso é muito legal ... eu gosto dos efeitos de suavização. Melhor que eu já vi.
—
Camden S.
As opções já listadas são muito boas, mas aqui estão mais algumas sobre esse tópico que eu pesquisei e me deparei.
1) http://perfectionkills.com/exploring-canvas-drawing-techniques/
2) http://mcc.id.au/2010/signature.html
3) https://zipso.net/a-simple-touchscreen -sketchpad-using-javascript-and-html5 /
E, como sempre, você pode salvar a tela em imagem:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
boa sorte e feliz assinatura
Outro campo de assinatura OpenSource é https://github.com/applicius/jquery.signfield/ , plug-in jQuery registrado usando o Sketch.js.