Form submit a signature captured using SVG

Question

I came across an example SVG signature capture by @heycam here:

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

Much simpler than any previous example I have seen, and it works with mouse and touch!

But how would I submit the result as part of a form?

I think I'd want it submitted as a base64 string but I'm open to other options...

For bonus points... any way to strip the yellow background and line from the submitted data?

Thanks!

Answer 1

That SVG-based sig capture hack by @heycam is technically awesome, if limited browser support for SVG does not scare you, by all means, call into the iframe, extract the source and push it server-side as text:

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

To get a string line:

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

Push it into SVG template like so:

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>'

And push that to server in hidden input field.

However, there is an easier way:

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

It works in almost all browsers (mobile and desktop) and can export nice, de-noised, smooth curves SVG.