CODEWITHSUNDEEP
javascripthtmlsvg
Jason Wood
Jason Wood

Reputation: 351

Form submit a signature captured using SVG

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!

Upvotes: 6

Views: 5426

Answers (2)

ddotsenko
ddotsenko

Reputation: 4996

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.

Upvotes: 4

Dave F
Dave F

Reputation: 370

If you look at his code, you can see how he extracts the signature into the div tag.

There's a script in the inline SVG that records the content into the "signaturePath" variable as events are fired. He then calls "getSignature" within the iframe to return the path. In order to extract the path, when the form is submitted, you'd need to call that function and create a hidden input tag which has a value of the path returned. You would extract the submitted value (which is the path) on the server side. You can later recreate the SVG using the saved path (which wouldn't have the yellow background).

Upvotes: 0

Related Questions