Capture Firma usando HTML5 y iPad

165

Alguien sabe cómo se puede hacer esto? ¿Usaría un objeto de lienzo, svg, jQuery, etc.?

ipad html canvas svg Mark Richman
fuente

Respuestas:

313

Aquí hay otra versión basada en lienzo con curvas de ancho variable (según la velocidad de dibujo): demostración en http://szimek.github.io/signature_pad y código en https://github.com/szimek/signature_pad .

muestra de firma

szimek
fuente
1
Gracias de antemano, mejor js signature lib que he visto. No sé por qué esta respuesta solo tuvo 3 votos. github.com/szimek/signature_pad
VAdaihiep
3
Me gusta que esto no se base en otras bibliotecas js y en lo bien que se ve. Una nota sobre su uso que me ayudó: agregue 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 cosas locas, así que solo especifique una altura y un ancho en el elemento del lienzo si esto se sale de control.
Brian McGinity
3
Jake, ¿qué es exactamente lo que falta en tu opinión en la documentación proporcionada en el archivo README? Estoy abierto a sugerencias sobre cómo mejorarlo.
szimek
77
Me disculpo. Creo que su documentación es realmente adecuada. Parecía limitado hasta que me di cuenta de lo fácil que es usarlo. Lo implementé completamente en un formulario, almacenando en la base de datos y volviendo a la página en menos de una hora. Supongo que lo estaba comparando con bibliotecas que eran mucho más complejas de usar como la respuesta elegida anteriormente. No había trabajado con URI de datos antes, pero es una forma realmente brillante de manejar el almacenamiento de los datos. Entonces, tuve que acostumbrarme a ellos y luego almacenar y recuperar en la base de datos fue tan ... fácil ... wow. ¡Gracias de nuevo!
Jake
1
@RonaldinhoLearnCoding revisa el archivo README: hay una lista de todas las opciones posibles. El que estás buscando se llama "penColor".
szimek
60

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

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

Ben S
fuente
2
Me sorprende lo hermoso que es este complemento.
Gourneau
¡Tan perfecto! ¡Gracias por compartir!
sagescrub
Encontré este complemento realmente difícil de usar de manera inusual. Todas las demostraciones fueron muy específicas y difíciles de aplicar. Definitivamente como el otro enfoque de la plataforma de firma mejor: stackoverflow.com/a/17200715/76672 Con casi ninguna documentación, pude hacer que funcione ...
Jake
18

Aquí hay una versión rápidamente pirateada de esto usando SVG que acabo de hacer. Funciona bien para mí en mi iPhone. También funciona en un navegador de escritorio utilizando eventos normales del mouse.

heycam
fuente
Quiero saber cómo dibujar una firma guardada
Yuri Morales
¿Cómo 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.

Intentamos VML en IE como respaldo 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 primario, con respaldo al emulador de Canvas basado en Flash (FlashCanvas) para IE8 y menos. Yo diría que funcionó muy bien para nosotros.

ddotsenko
fuente
Esto es realmente agradable ... Me gusta sus efectos suavizantes. Lo mejor que he visto.
Camden S.
2

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 en la imagen:
http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

buena suerte y feliz fichaje

Luigi D'Amico
fuente