27

My company is considering offering a lightweight mobile web site for data entry in the field (we already have a thick-client mobile application). One hard requirement is that we must be able to capture a signature.

Is there any prior art for capturing a signature, specifically inside a web page running inside a mobile web browser, across a wide variety of mobile devices/web browsers? I am only asking for in-browser solutions, not thick-clients.

For obvious reasons, the device would be required to have a touchscreen.

Certainly there are many, many different mobile browsers out there with a wide variety of capabilities. The ideal solution would support as many browsers as possible and degrade gracefully based on browser capabilities.

I am already aware that certain versions of Flash might provide the drawing APIs needed for something like this, assuming the desired device's browser supports Flash.

I'm also aware of a third party ActiveX/OCX control for Pocket IE on Windows Mobile devices. It is necessary for the user to manually download/install the control within the browser before use. Unfortunate, but acceptable.

I'm not personally aware of many mobile browsers that support hosting a Java applet, but there are probably some. Again, based on the support for various Java APIs, perhaps this would be a possible avenue.

Javascript could do this, if the engine and processor are robust enough on the device.

Finally, total pipe-dream here, perhaps one could have the user take a picture of a signature using the mobile device's camera on a plain piece of paper and somehow count that as a valid signature. However, this would produce a bitmap image, as opposed to vectors which I'd likely be collecting in all other instances. Also, it would be pretty difficult, if not impossible/unreasonable, to integrate the taking of the photo via a camera app and upload that using the web browser app while associating that specific image with the rest of the data being captured.

Thanks.

Larry Silverman
  • 1,043
  • 1
  • 11
  • 30
  • You can digitally sign stuff in PDFs but they definitely don't take the real signature. Is there anything to stop you from doing that here? – Wayne Werner Jun 23 '10 at 18:16
  • I realise this is an old question but it's a popluar google search for the same topic. That bennet-tec control you link to is no good on newer versions of Internet Explorer and I don't think they've got any plans to upgrade it. We're searching for a solution to get away from them. – Mark Henderson Jun 29 '10 at 01:41

12 Answers12

20

There is a jQuery plugin to do this now -> http://thomasjbradley.ca/lab/signature-pad

The previous link is inactive as of March 17, 2016, but the relevant repository is on GitHub: https://github.com/thomasjbradley/signature-pad

Peter O.
  • 32,158
  • 14
  • 82
  • 96
Simon
  • 577
  • 6
  • 15
  • Currently using in deployment. – TPorteus Nov 26 '10 at 15:09
  • Note: There is a note on that site that converting it into an image doesn't always work on Android below version 3. Having said that, if you can get the coordinate data, you can always make your own image. – tsilb Nov 15 '11 at 19:00
2

I think the picture idea is really clever, but I'd take it one step further. Some mobile devices (phones in particular) don't even do file uploads in a browser. I'd generate an operation specific email address, a hash of some sort of transaction id and the user id for instance, and allow it to be sent as an email attachment. This should catch a very wide variety of clients, as well as not adding terrible complexity.

tanner
  • 21
  • 1
  • Neat idea. But how to tightly integrate the whole signature capture such that it's seamless for the user? Every camera-enabled device is going to have its own camera app. There won't be one common method for getting to the camera app from the web app. – Larry Silverman Oct 03 '08 at 15:37
  • So it would be like: Switch to camera. Take picture. Get picture into email as attachment. Set email address. Scan a barcode or otherwise enter unique id (maybe put that in Subject). Sadly that's probably just too much work and too much for a user to remember. – Larry Silverman Oct 03 '08 at 15:38
2

All these answers are outdated.

Currently the best library is - https://github.com/szimek/signature_pad

signature-pad by thomas bradley is no longer maintained

Blair Anderson
  • 19,463
  • 8
  • 77
  • 114
2

thomas j bradley's jQuery signature-pad plugin is awesome and very easy to implement.

Bob
  • 21
  • 1
  • Its ok, a bit scribbly. There are better plugins out there that apply a smooth affect creating a good looking signature, great for UX. The plugins are not free though. Anyone found a free one> – Gary Davies Nov 19 '14 at 07:41
1

First off, I'm a C++ developer, not web, but have written and deployed a Windows Mobile signature capture routine in C++ / MFC. If you want to use or translate the code, let me know and I'll post it here. It is not particularly elegant, but does the job. Basically, you need the button clicks and mouse movement messages available.

Having already been down this road, my conclusion is that it is not a great use of technology. The screens tend to get scuffed and unresponsive on the signature capture area, making them useless not only for signature capture, but also for other operation. Our experience was that for mobile sales force type applications, it limited the life of the hand helds to about a year, and resulted with less than happy users.

The camera idea seems much cleverer and isn't going break the device. IMO you'd also get much better signatures, touch screen ones are awful.

SmacL
  • 22,555
  • 12
  • 95
  • 149
  • I think he's asking for something that can run in a browser. – JC. Oct 02 '08 at 18:15
  • Good feedback, in every case you are using the device screen. Our users are mechanics and maintenance folks. They have rougher hands, wear rough gloves, and at times fingers soiled. Need a good screen protector. – xpagesbeast Nov 02 '16 at 14:35
1

Yes, found one, this works on Android 2.1, 2.2, iPhone. It works really well, and comes with php code for turning your JSON saved co-ordinates into images. http://thomasjbradley.ca/lab/signature-pad

Matt
  • 412
  • 1
  • 3
  • 14
1

http://mysignature.brinkster.net - Does not work for a Mobile browser http://thomasjbradley.ca/lab/signature-pad - Does not work for the IE. It has canvas and flash technologies. IE has problem with canvas tag.

Abhinaw Sharma
  • 676
  • 5
  • 8
0

Canvas, with Flash (Through FlashCanvas) worked well for us with jSignature. http://willowsystems.github.com/jSignature/

MIT + Works (was specifically written to run) everywhere there is Canvas or Flash. + tested on iPad, iPhone, Android tablets, phones.

ddotsenko
  • 4,926
  • 25
  • 24
0

I don't think this is even technically possible if you're talking about having it work on a wide array of mobile browers. Most phones can at least email a picture pretty easily so you could always send it to some account where the attachments are dumped somewhere. Still, you would have to manually type in some identifier in the subject.

JC.
  • 11,561
  • 11
  • 41
  • 50
0

If the mobile browser supports javascript then you might be able to do this on some touchscreen devices. Otherwise it's got to be done with a plugin, java, flash, or some similar method.

With javascript you'd look at where the 'mouse' is. On some devices if the user is pressing on the screen with the stylus you can capture mouse movements and record the pattern they follow (signature).

I suspect that some mobile browsers don't pass that info onto the javascript though - they may only pass clicks...

Some testing may be in order.

-Adam

Adam Davis
  • 91,931
  • 60
  • 264
  • 330
0

Without embedding something on a web page, the only way to do this would be with JavaScript.

Unfortunately most mobile browsers don't support JavaScript and the ones that do aren't particularly fast.

I don't think that it's possible to create a generic solution based on most of the devices which are currently around.

Matt Lacey
  • 65,560
  • 11
  • 91
  • 143
0

You may want to consider OpenSource jQuery plugin: https://github.com/applicius/jquery.signfield/

cchantep
  • 9,118
  • 3
  • 30
  • 41