Alguien sabe cómo se puede hacer esto? ¿Usaría un objeto de lienzo, svg, jQuery, etc.?
Capture Firma usando HTML5 y iPad
Respuestas:
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 .
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
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
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
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
@RonaldinhoLearnCoding revisa el archivo README: hay una lista de todas las opciones posibles. El que estás buscando se llama "penColor".
—
szimek
Un elemento de lienzo con algo de JavaScript funcionaría muy bien.
De hecho, Signature Pad (un complemento jQuery) ya lo tiene implementado.
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
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.
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
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.
Esto es realmente agradable ... Me gusta sus efectos suavizantes. Lo mejor que he visto.
—
Camden S.
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
Otro campo de firma de OpenSource es https://github.com/applicius/jquery.signfield/ , plugin jQuery registrado usando Sketch.js.