Digitally Hand Signing Documents

I recently had the opportunity to work on a small freelance project. My client wanted to put together a system that would allow people to digitally hand sign legal documents. It turned out to be a fun, little project. Due to confidentiality, I am unable to name my client or to show off any of the code base. However, I can describe the project in general terms.

The first half of the project was very straight forward. I created a web-based form with several fields for the user to fill out. The user submits the form and the server validates the user’s input. If the input the user provides isn’t valid, the user gets an error message to fix the problematic input. Laravel was used as the framework for the project and this functionality is built into it with respect to forms and request validation.

The other part of the project was more important and more interesting, digitally hand signing a document. The client wanted the user to be able to provide a signature on a laptop or desktop using a mouse, or from a tablet or cell phone using their finger or stylus. HTML5 includes a canvas element that graphics can be drawn on with the help of some JavaScript code.

There are several pre-written JavaScript modules that can record handwriting. I used one of these modules to display the user’s handwriting as they interacted with the canvas to create the signature. The ‘toDataURL()’ method was used to include a PNG of the canvas’ contents with the other inputs the user provided on the form.

Since this signature is intended to be used in a legal document, the client wanted to avoid allowing the user to draw a simple line or an ‘X’. So, I couldn’t simply accept the image of the signature as automatically valid. At the same time, doing detail analysis of an image is time consuming and isn’t ideal for a fast, web-based system. A way of analyzing the handwriting on the image in a quick and dirty way was needed. I came up with two approaches to accomplishing this

The first approach occurred on the client-side as the user was actually writing out the signature. A count was made of each point in the signature. Straight lines produced fewer points than more complex writings and signatures. If the count of points in the signature was greater than a specified threshold then the signature was accepted and sent to the server.

The second approach was a server-side validation method using the PHP ImageMagick expansion to process the PNG of the signature. I divided the image into a number of pieces. Each piece was then examined to see if it contained any part of the signature or if it was just white space. If the count of pieces containing part of the signature was larger than a specified threshold then the signature was accepted.

The final step in the project was to take the information and signature provided by the user and put it into an SVG document. SVG, being a form of XML, was easy to manipulate using PHP's SimpleXML. It was largely a process of: find tag with specified form field id, replace tag's text with user data, find tag with signature id, replace image with user's signature.

Putting it all together took about a week with some back-and-forth final modifications with the client and earned me a nice end-of-year bonus. Now, what's next?