Formulario presentar una firma capturada usando SVG

me encontré con un ejemplo captura de SVG firma de @heycam aquí:Formulario presentar una firma capturada usando SVG

Capture Signature using HTML5 and iPad Ejemplo: http://mcc.id.au/2010/signature.html

mucho más simple que cualquier ejemplo anterior que he visto, y funciona con mouse y touch!

¿Pero cómo debería enviar el resultado como parte de un formulario?

creo que me gustaría que presentó como una cadena de base 64, pero estoy abierto a otras opciones ...

de puntos de bonificación ... alguna forma de pelar el fondo amarillo y la línea de los datos presentados ?

Gracias!

Fuente

2011-09-22 Jason Wood

Soy fan de base64, no veo mejor solución ... – Mohsen

Ni el fondo amarillo ni la línea punteada están incluidos en la ruta de salida, son elementos de signature.svg incluidos. La ruta de la firma se almacena en el atributo svg del elemento ''. Cuando la página está cargada, abre Firebug y abre el elemento SVG. Dibuja una firma y verás que se llena el atributo d. – fvu

Si mira su código, puede ver cómo extrae la firma en la etiqueta div.

Hay un script en el SVG en línea que registra el contenido en la variable "signaturePath" a medida que se desencadenan los eventos. Luego llama a "getSignature" dentro del iframe para devolver el camino. Para extraer la ruta, cuando se envíe el formulario, deberá llamar a esa función y crear una etiqueta de entrada oculta que tenga un valor de la ruta devuelta. Extraería el valor enviado (que es la ruta) en el lado del servidor. Luego puede volver a crear el SVG usando la ruta guardada (que no tendría el fondo amarillo).

Fuente

2011-09-23 01:04:00

Ese hack de captura de sig basado en SVG de @heycam es técnicamente increíble, si el soporte de navegador limitado para SVG no te asusta, llama al iframe, extrae la fuente y ponla en el lado del servidor como texto:

var strokes = window.frames[0].getSignature()

para obtener una línea de cadena:

"M182,46 M141,30 L136,34 L136,36 L134,40 L134,47 L135,52 L146,64"

empuje en su plantilla SVG de esta manera:

var svgstring = '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">' + 
    '<path stroke="navy" stroke-width="2" fill="none" d='+ strokes +'/></svg>'

Y empuje eso al servidor en el campo de entrada oculto.

Sin embargo, hay una manera más fácil:

http://willowsystems.github.com/jSignature/

funciona en casi todos los navegadores (móviles y de escritorio) y puede exportar agradables, curvas, de-noised lisas SVG.

Fuente

2012-06-01 20:57:39 ddotsenko

Formulario presentar una firma capturada usando SVG

Respuesta

Cuestiones relacionadas