129
Wer weiß, wie dies getan werden kann? Würden Sie ein Canvas-Objekt, Svg, jQuery usw. verwenden?Capture Signature mit HTML5 und iPad
A
Antwort
248
Hier ist eine andere Canvas-basierte Version mit variabler Breite (basierend auf Zeichnungsgeschwindigkeit) Kurven: Demo bei http://szimek.github.io/signature_pad und Code bei https://github.com/szimek/signature_pad.
57
Ein Canvas-Element mit etwas JavaScript würde großartig funktionieren.
Tatsächlich hat Signature Pad (ein jQuery-Plugin) bereits dies implementiert.
+2
I Ich bin erstaunt, wie schön dieses Plugin ist. – Gourneau
+0
So perfekt! Danke für das Teilen! – Noel
+0
Ich fand dieses Plug-In wirklich schwer zu verwenden unordentlich. Alle Demos waren sehr spezifisch und schwierig anzuwenden. Definitiv wie die andere Signatur Pad Ansatz besser: http://Stackoverflow.com/a/17200715/76672 Mit ziemlich viel Dokumentation, konnte ich es zum Laufen bringen ... – Jake
14
Hier ist a quickly hacked up version of this using SVG Ich habe gerade getan. Funktioniert gut für mich auf meinem iPhone. Funktioniert auch in einem Desktop-Browser mit normalen Mausereignissen.
+0
Ich möchte wissen, wie eine gespeicherte Unterschrift zeichnen –
+0
How Signatur als PNG-Datei speichern oder anders signieren? – Andrus
12
Vielleicht sind die besten zwei Browser-Tech für Canvas, mit Flash als Backup.
Wir haben versucht, VML auf IE als Sicherung für Canvas, aber es war viel langsamer als Flash. SVG war langsamer als alle anderen.
Mit jSignature (http://willowsystems.github.com/jSignature/) verwendeten wir Canvas als primary, mit Fallback auf Flash-basierten Canvas-Emulator (FlashCanvas) für IE8 und weniger. Id 'sagen, hat sehr gut für uns gearbeitet.
+0
Das ist wirklich nett ... Ich mag es glättende Effekte. Das Beste, was ich gesehen habe. –
0
Ein weiteres Open Source Unterschriftsfeld https://github.com/applicius/jquery.signfield/, registriert jQuery Plugin Sketch.js ist.
1
Die bereits aufgelisteten Optionen sind sehr gut, aber hier ein paar mehr zu diesem Thema, das ich recherchiert und gestoßen bin.
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 können Sie die Leinwand Bild gespeichert werden soll:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
viel Glück und glücklich Unterzeichnung
Verwandte Themen
- 1. Signature Capture auf windows mobile Java-Anwendung
- 2. HTML5-Video-Capture und -Streaming?
- 3. HTML5-Video auf IPad abspielen und
- 4. iPad html5 Video mit NO Kontrollen?
- 5. HTML5-Videosuche auf dem iPad
- 6. Javascript HTML5 Capture keyCode und schreibe in Canvas
- 7. HTML5 Formulare und Offline-Speicher in IPAD-App
- 8. Erstellen einer iPad App mit HTML5-Inhalt mit Xcode 4.3.2
- 9. iPad: Mobile Safari, HTML5 <video> und jquery Übergänge
- 10. HTML5 Video Layering auf dem iPad
- 11. iPhone/iPad HTML5 Canvas fillText Problem
- 12. fehlt html5 Video "beendete" Ereignis auf iPad
- 13. RSA Signature Size Mismatch
- 14. XML Digital Signature Java
- 15. HTML5 Audio mit PHP-Skript funktioniert nicht auf iPad/Iphone
- 16. typescript function signature conflict
- 17. Signature Generation in Amazon S3 mit Javascript
- 18. HTML5-Frameworks und -Tools?
- 19. Html5 Videoaufnahme und -upload?
- 20. Capture Bild von der Kamera in Form oder html5 Leinwand
- 21. HTML5 Capture-Attribut auf Geräte Bild gedreht erhalten
- 22. Programmgesteuert Outlook Signature Standards festlegen?
- 23. Schnell blox - Signature Generation Ausgabe
- 24. Capture-Tastenkombinationen und weiterleiten
- 25. OpenPGP- Signature Packet gehashte Daten
- 26. .NET IO Exception "Invalid Signature"
- 27. HTML5-Videoformat, Videogröße und FPS
- 28. default argument function signature change
- 29. Amazon Product Advertising API Signature
- 30. Wie man mp4 Videodatei mit HTML5 Video Tag auf iOS (iPhone und iPad) spielt?
Vielen Dank im Voraus, beste js Unterschrift lib, die ich je gesehen habe. Ich weiß nicht, warum diese Antwort nur 3 Stimmen hatte. https://github.com/szimek/signature_pad – VAdaihiep
Ich mag, dass dies nicht auf andere js-Bibliotheken angewiesen ist und wie gut es aussieht. Ein Hinweis zur Verwendung, der mir geholfen hat: Fügen Sie einen Rahmen zur Leinwand hinzu, so dass Sie sehen können, wie sie angepasst wird. Beachten Sie auch, dass CSS Änderungen an der Zeichenfläche einige verrückte Dinge tun, also geben Sie einfach eine Höhe und Breite im Element canvas, wenn dies außer Kontrolle geraten. –
Mangel an Dokumentation ist nicht hilfreich, aber die Demo-Seite legt es ziemlich klar. Ich arbeite daran, es in der Datenbank zu speichern und abzurufen. Dies ist eine wirklich glatte Bibliothek. Danke szimek! – Jake