Capture de Signature à L'aide de HTML5 et iPad

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

137
demandé sur Mark Richman 2010-06-22 23:34:44

6 réponses

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

échantillon de signature

270
répondu szimek 2013-12-10 12:48:35

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

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

57
répondu Ben S 2016-03-31 17:36:39

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

14
répondu heycam 2010-06-23 04:45:52

Peut-être que les deux meilleurs techniciens de navigateur 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 primaire, avec fallback to Flash-based Canvas emulator (FlashCanvas) pour IE8 et moins. Id' dire très bien fonctionné pour nous.

12
répondu ddotsenko 2012-06-01 19:56:18

Les options déjà listées sont très bonnes, mais voici un peu plus sur ce sujet que j'ai étudié 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 la toile à image:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

bonne chance et bonne signature

1
répondu Luigi D'Amico 2017-06-14 12:11:58

Un autre champ de signature OpenSource est https://github.com/applicius/jquery.signfield/, plugin jQuery enregistré en utilisant Sketch.js .

0
répondu cchantep 2014-08-04 18:11:40