jQuery Signature Capture with .NET Server Code

In a recent project for a client, the client asked for the ability to capture a customer's signature inside of the application, and have that applied to a PDF report of services rendered. Previously, they would print the PDF, and have the customer physically sign it, and they obviously wanted to make the process more efficient and paperless.

There are a variety of JavaScript signature capture tools out there, and all of them have their strengths, weaknesses, and of course, quirks. For this particular project, there was a transition to newer, better laptops, and the potential for touchscreen signature entry was important to them. The biggest problem with many of the client-side signature tools on the market is that they don't properly capture the touch event. This means that in touch browsers like Internet Explorer, attempting to write a signature with your finger results in dragging the viewport.

Signature Pad is a jQuery signature plugin that solves this problem, and it works perfectly. Implementation was painless, and it even has several 3rd-party server-side image conversion examples/codebases.

For the purpose of this particular project, Signature to Image .NET was exactly what I were looking for. Almost.

Signature Pad uses a specific canvas size that is saved along with the signature data in a JSON representation. When Signature to Image .NET turns it back into an image, the size remains the same as the capture size. This means that if you resize the Signature Pad canvas, the signature image will be the same size on the backend.

The problem I had with this was that the captured signature needed to be large, while the subsequent converted image needed to be small to fit on a signature line in a PDF. If you simply changed the size of the canvas in the backend code, it adjusted the canvas, but not the signature image itself, so you would end up with a truncated image.

To resolve this issue, I forked the Signature to Image .NET code on GitHub, and added an override method:

public Bitmap SigJsonToImage(string json, Size size)
      

This method takes a Size() object that represents the width and height of the display you want.

When it's time to return the bitmap, I check that the size is not the same as the canvas width and height, and if it isn't, I resize the image:

return (Bitmap)((size.Width == CanvasWidth && size.Height == CanvasHeight) ? signatureImage : ResizeImage(signatureImage, size));
      

The resize method itself is standard .NET image resizing using the Size() object for the width and height values.

In your code, you can use this modified version to resize your signature image:

var sigToImg = new SignatureToImage();
      sigToImg.CanvasWidth = 800;
      sigToImg.CanvasHeight = 400;
      signatureImage = sigToImg.SigJsonToImage(SIG_JSON_STRING, new Size(150, 75));
      

In this example, I instantiate the SignatureToImage(). I then adjust the canvas size to match the canvas size of the jQuery Signature Pad plugin. In this example, I have a 800 x 600 signature capture area for touchscreens. Then I call the SignJsonToImage method with the output size that I want for the image. Again, in this example, I'm outputting the image to 150 x 75 for the PDF.

After making these changes, I sent out a pull request to Curtis Herbert, and he merged the changes with the original GitHub project.