Erfassen Sie die Signatur mit HTML5 und iPad

165

Weiß jemand, wie das gemacht werden kann? Würden Sie ein Canvas-Objekt, svg, jQuery usw. verwenden?

ipad html canvas svg Mark Richman
quelle

Antworten:

313

Hier ist eine weitere Canvas-basierte Version mit Kurven mit variabler Breite (basierend auf der Zeichengeschwindigkeit): Demo unter http://szimek.github.io/signature_pad und Code unter https://github.com/szimek/signature_pad .

Unterschriftenmuster

szimek
quelle
1
Vielen Dank im Voraus, beste js Signatur lib, die ich je gesehen habe. Ich weiß nicht, warum diese Antwort gerade 3 Stimmen hatte. github.com/szimek/signature_pad
VAdaihiep
3
Ich mag, dass dies nicht von anderen js-Bibliotheken abhängt und wie gut es aussieht. Ein Hinweis zur Verwendung, der mir geholfen hat: Fügen Sie der Leinwand einen Rahmen hinzu, damit Sie sehen können, wie sie angepasst wird. Beachten Sie auch, dass CSS-Änderungen an der Zeichenfläche einige verrückte Dinge bewirken. Geben Sie daher einfach eine Höhe und Breite im Zeichenflächenelement an, wenn dies außer Kontrolle gerät.
Brian McGinity
3
Jake, was genau fehlt Ihrer Meinung nach in der Dokumentation in der README-Datei? Ich bin offen für Vorschläge, wie ich es verbessern kann.
Szimek
7
Ich entschuldige mich. Ich denke, Ihre Dokumentation ist tatsächlich angemessen. Es schien begrenzt zu sein, bis mir klar wurde, wie einfach dies zu bedienen ist. Ich habe es vollständig in einem Formular implementiert, in der Datenbank gespeichert und in weniger als einer Stunde wieder auf die Seite zurückgerufen. Ich nehme an, ich habe es mit Bibliotheken verglichen, deren Verwendung viel komplexer war als die oben gewählte Antwort. Ich hatte vorher noch nicht mit Daten-URIs gearbeitet, aber es ist eine wirklich hervorragende Möglichkeit, die Speicherung der Daten zu handhaben. Also musste ich mich nur an diese gewöhnen und dann war das Speichern und Abrufen in der Datenbank so ... einfach ... wow. Danke noch einmal!
Jake
1
@RonaldinhoLearnCoding Überprüfen Sie die README-Datei - es gibt eine Liste aller möglichen Optionen. Die gesuchte Datei heißt "penColor".
Szimek
60

Ein Canvas-Element mit etwas JavaScript würde großartig funktionieren.

In Signature Pad (einem jQuery-Plugin) ist dies bereits implementiert.

Ben S.
quelle
2
Ich bin erstaunt, wie schön dieses Plugin ist.
Gourneau
So perfekt! Danke für das Teilen!
Sagescrub
Ich fand es sehr schwierig, dieses Plugin ohne Probleme zu verwenden. Alle Demos waren sehr spezifisch und schwierig anzuwenden. Auf jeden Fall wie der andere Signatur-Pad-Ansatz besser: stackoverflow.com/a/17200715/76672 Mit so gut wie keiner Dokumentation konnte ich es zum Laufen bringen ...
Jake
18

Hier ist eine schnell gehackte Version davon mit SVG, die ich gerade gemacht habe. Funktioniert gut für mich auf meinem iPhone. Funktioniert auch in einem Desktop-Browser mit normalen Mausereignissen.

Heycam
quelle
Ich möchte wissen, wie man eine gespeicherte Unterschrift zeichnet
Yuri Morales
Wie speichere ich die Signatur als PNG-Datei oder zeige die Signatur auf andere Weise?
Andrus
12

Die vielleicht besten zwei Browsertechniker dafür sind Canvas mit Flash als Backup.

Wir haben VML im IE als Backup für Canvas ausprobiert, aber es war viel langsamer als Flash. SVG war langsamer als alle anderen.

Mit jSignature ( http://willowsystems.github.com/jSignature/ ) haben wir Canvas als primäres Element verwendet, wobei auf den Flash-basierten Canvas-Emulator (FlashCanvas) für IE8 und weniger zurückgegriffen wurde. Ich würde sagen, es hat sehr gut für uns funktioniert.

ddotsenko
quelle
Das ist wirklich schön ... Ich mag die Glättungseffekte. Am besten ich habe gesehen.
Camden S.
2

Die bereits aufgeführten Optionen sind sehr gut, aber hier noch ein paar zu diesem Thema, die ich recherchiert und gefunden habe.

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 /

Und wie immer möchten Sie die Leinwand möglicherweise als Bild speichern:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

Viel Glück und viel Spaß beim Unterschreiben

Luigi D'Amico
quelle