Qualcuno sa come si può fare? Utilizzeresti un oggetto canvas, svg, jQuery, ecc.?
Cattura la firma utilizzando HTML5 e iPad
Risposte:
Ecco un'altra versione basata su tela con curve a larghezza variabile (basate sulla velocità di disegno): demo su http://szimek.github.io/signature_pad e codice su https://github.com/szimek/signature_pad .
1
Grazie in anticipo, la migliore lib di firma js che abbia mai visto. Non so perché questa risposta abbia appena ottenuto 3 voti. github.com/szimek/signature_pad
—
VAdaihiep
Mi piace che questo non faccia affidamento su altre librerie js e su quanto appaia. Una nota sull'uso che mi ha aiutato: aggiungi un bordo alla tela in modo da poter vedere come viene regolato. Si noti inoltre che le modifiche CSS alla tela fanno cose folli, quindi basta specificare un'altezza e una larghezza nell'elemento tela se questo va fuori controllo.
—
Brian McGinity,
Jake, cosa manca esattamente secondo te nella documentazione fornita nel file README? Sono aperto a suggerimenti su come migliorarlo.
—
szimek,
Chiedo scusa. Penso che la tua documentazione sia effettivamente adeguata. Mi è sembrato limitato fino a quando ho capito quanto sia facile da usare. L'ho implementato completamente in un modulo, memorizzandolo nel database e recuperando la pagina in meno di un'ora. Suppongo, lo stavo confrontando con le librerie che erano molto più complesse da usare come la risposta scelta sopra. Non avevo mai lavorato con URI di dati prima, ma è un modo davvero geniale di gestire l'archiviazione dei dati. Quindi, ho dovuto solo abituarmi a quelli e quindi archiviare e recuperare nel database era così ... facile ... wow. Grazie ancora!
—
Jake,
@RonaldinhoLearnCoding controlla il file README - c'è un elenco di tutte le opzioni possibili. Quello che stai cercando si chiama "penColor".
—
szimek,
Un elemento canvas con alcuni JavaScript funzionerebbe alla grande.
In effetti, Signature Pad (un plug-in jQuery) lo ha già implementato.
Sono stupito di quanto sia bello questo plugin.
—
Gourneau,
Così perfetta! Grazie per la condivisione!
—
sagescrub,
Ho trovato questo plugin davvero difficile da usare senza preavviso. Tutte le demo erano molto specifiche e difficili da applicare. Sicuramente mi piacerebbe che l'approccio con gli altri pad delle firme fosse migliore: stackoverflow.com/a/17200715/76672 Senza praticamente alcuna documentazione, sono stato in grado di farlo funzionare ...
—
Jake,
Ecco una versione rapidamente modificata di questo usando SVG che ho appena fatto. Funziona bene per me sul mio iPhone. Funziona anche in un browser desktop utilizzando normali eventi del mouse.
Voglio sapere come disegnare una firma salvata
—
Yuri Morales,
Come salvare la firma come file png o mostrare la firma in altro modo?
—
Andrus,
Forse i due migliori browser tecnici per questo sono Canvas, con il backup di Flash.
Abbiamo provato VML su IE come backup per Canvas, ma era molto più lento di Flash. SVG è stato più lento di tutto il resto.
Con jSignature ( http://willowsystems.github.com/jSignature/ ) abbiamo usato Canvas come primario, con fallback all'emulatore Canvas basato su Flash (FlashCanvas) per IE8 e meno. Direi che ha funzionato molto bene per noi.
È davvero bello ... Mi piacciono gli effetti leviganti. La migliore che abbia mai visto.
—
Camden S.
Le opzioni già elencate sono molto buone, tuttavia qui alcune altre su questo argomento che ho studiato e trovato.
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 /
E come sempre potresti voler salvare l'immagine su tela:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
buona fortuna e buona firma
Un altro campo di firma OpenSource è https://github.com/applicius/jquery.signfield/ , plugin jQuery registrato che utilizza Sketch.js.