Signature capture possible in various mobile web b

问题:

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.

回答1:

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

回答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.

回答3:

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

回答4:

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.

回答5:

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

回答6:

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.

回答7:

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.

回答8:

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

回答9:

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.

回答10:

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.

回答11:

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

回答12:

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