Capture Signature usando HTML5 y iPad

248

Aquí es otra versión de la lona con base con anchura variable (basado en velocidad de estirado) Curvas: demo en http://szimek.github.io/signature_pad y el código en https://github.com/szimek/signature_pad.

signature sample

Fuente

2013-06-19 20:30:58 szimek

+1

Gracias de antemano, mejor js signature lib que he visto. No sé por qué esta respuesta solo tenía 3 votos. https://github.com/szimek/signature_pad – VAdaihiep

+2

Me gusta que esto no dependa de otras bibliotecas js y de lo bien que se ve. Una nota sobre su uso que me ayudó: agregar un borde al lienzo para que pueda ver cómo se está ajustando. También tenga en cuenta que los cambios de CSS en el lienzo hacen algunas locuras, así que simplemente especifique un alto y ancho en el elemento canvas si esto se sale de control. –

+0

La falta de documentación no es útil, pero la página de demostración lo explica todo claramente. Estoy trabajando en almacenarlo en la base de datos y recuperarlo. Esta es una biblioteca REALMENTE elegante. Gracias szimek! – Jake

57

Un elemento canvas con algo de JavaScript funcionaría muy bien.

De hecho, Signature Pad (un plugin jQuery) ya lo tiene implementado.

Fuente

2010-06-22 19:40:57

+2

I estoy asombrado de lo hermoso que es este complemento. – Gourneau

+0

¡Tan perfecto! ¡Gracias por compartir! – Noel

+0

Encontré este plugin realmente difícil de usar de manera inexplicable. Todas las demostraciones fueron muy específicas y difíciles de aplicar. Definitivamente me gusta más el otro enfoque de la libreta de firmas: http://stackoverflow.com/a/17200715/76672 Con prácticamente ninguna documentación, pude hacerlo funcionar ... – Jake

14

Aquí está a quickly hacked up version of this using SVG Acabo de hacer. Funciona bien para mí en mi iPhone. También funciona en un navegador de escritorio usando eventos normales de mouse.

Fuente

2010-06-23 04:45:52 heycam

+0

Quiero saber cómo dibujar una firma guardada –

+0

Cómo para guardar la firma como archivo png o mostrar la firma de otra manera? – Andrus

12

Quizás los mejores dos técnicos de navegador para esto son Canvas, con Flash como respaldo.

Probamos VML en IE como copia de seguridad para Canvas, pero fue mucho más lento que Flash. SVG fue más lento que todo el resto.

Con jSignature (http://willowsystems.github.com/jSignature/) utilizamos Canvas como principal, con respaldo al emulador de Canvas basado en Flash (FlashCanvas) para IE8 y menos. Id 'dice que funcionó muy bien para nosotros.

Fuente

2012-06-01 19:56:18 ddotsenko

+0

Esto es realmente bueno ... Me gustan los efectos suavizantes. Lo mejor que he visto –

0

Otro campo de firma OpenSource es https://github.com/applicius/jquery.signfield/, registrada plugin de jQuery usando Sketch.js.

Fuente

2014-08-04 18:11:40 cchantep

1

Las opciones ya enumeradas son muy buenas, sin embargo aquí hay algunas más sobre este tema que he investigado y encontrado.

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/

Y como siempre es posible que desee guardar el lienzo a la imagen:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

buena suerte y la firma feliz

Fuente

2017-06-14 12:11:58