Capturez la signature en utilisant HTML5 et iPad


165

Quelqu'un sait comment cela peut être fait? Utiliseriez-vous un objet canevas, svg, jQuery, etc.?

Réponses:


313

Voici une autre version basée sur le canevas avec des courbes de largeur variable (basées sur la vitesse de dessin): démo sur http://szimek.github.io/signature_pad et code sur https://github.com/szimek/signature_pad .

échantillon de signature


1
Merci d'avance, la meilleure bibliothèque de signature js que j'ai jamais vue. Je ne sais pas pourquoi cette réponse a juste eu 3 votes. github.com/szimek/signature_pad
VAdaihiep

3
J'aime le fait que cela ne dépend pas des autres bibliothèques js et de son apparence. Une note sur son utilisation qui m'a aidé: ajoutez une bordure à la toile pour que vous puissiez voir comment elle est ajustée. Notez également que les modifications css apportées au canevas font des choses folles, alors spécifiez simplement une hauteur et une largeur dans l'élément canevas si cela devient incontrôlable.
Brian McGinity

3
Jake, que manque-t-il exactement à votre avis dans la documentation fournie dans le fichier README? Je suis ouvert aux suggestions pour l'améliorer.
szimek

7
Je m'excuse. Je pense que votre documentation est en fait adéquate. Cela semblait limité jusqu'à ce que je réalise à quel point c'est facile à utiliser. Je l'ai entièrement implémenté sous une forme, stockée dans la base de données et récupérée à la page en moins d'une heure. Je suppose que je le comparais à des bibliothèques beaucoup plus complexes à utiliser comme la réponse choisie ci-dessus. Je n'avais jamais travaillé avec des URI de données auparavant, mais c'est un moyen vraiment génial de gérer le stockage des données. Donc, je devais juste m'acclimater à ceux-ci, puis stocker et récupérer dans la base de données était si ... facile ... wow. Merci encore!
Jake

1
@RonaldinhoLearnCoding extrait le fichier README - il y a une liste de toutes les options possibles. Celui que vous recherchez s'appelle "penColor".
szimek

60

Un élément de canevas avec du JavaScript fonctionnerait très bien.

En fait, Signature Pad (un plugin jQuery) l'a déjà implémenté.


2
Je suis étonné de la beauté de ce plugin.
Gourneau

Tellement parfait! Merci d'avoir partagé!
sagescrub

J'ai trouvé ce plugin vraiment difficile à utiliser de manière inattendue. Toutes les démos étaient très spécifiques et difficiles à appliquer. Certainement comme l'autre approche du pavé de signature mieux: stackoverflow.com/a/17200715/76672 Avec à peu près aucune documentation, j'ai pu le faire fonctionner ...
Jake


12

Peut-être que les deux meilleures technologies de navigation pour cela sont Canvas, avec Flash comme sauvegarde.

Nous avons essayé VML sur IE comme sauvegarde pour Canvas, mais c'était beaucoup plus lent que Flash. SVG était plus lent que tout le reste.

Avec jSignature ( http://willowsystems.github.com/jSignature/ ), nous avons utilisé Canvas comme principal, avec un retour à l'émulateur de Canvas basé sur Flash (FlashCanvas) pour IE8 et moins. Je dirais que cela a très bien fonctionné pour nous.


C'est vraiment sympa ... j'aime bien ses effets de lissage. Le meilleur que j'ai vu.
Camden S.

2

Les options déjà énumérées sont très bonnes, mais voici quelques autres sur ce sujet que j'ai recherché et rencontré.

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 /

Et comme toujours, vous voudrez peut-être enregistrer le canevas dans l'image:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

bonne chance et bonne signature


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.