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.?

ipad html canvas svg Mark Richman
la source

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

szimek
la source
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é.

Ben S
la source
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
18

Voici une version rapidement piratée de ceci en utilisant SVG que je viens de faire. Fonctionne bien pour moi sur mon iPhone. Fonctionne également dans un navigateur de bureau en utilisant les événements de souris normaux.

heycam
la source
Je veux savoir comment dessiner une signature enregistrée
Yuri Morales
Comment enregistrer la signature en tant que fichier png ou afficher la signature d'une autre manière?
Andrus
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.

ddotsenko
la source
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

Luigi D'Amico
la source