DocumentViewer: Aspect Ratio Scaling of Signature Annotations

Aspect Ratio Scaling of Signature Annotations

A typical application for the TX Text Control DocumentViewer is the acquisition of signature images. There are two ways to acquire signatures from users:

1. Using pre-defined signature fields
2. Using signature annotations

The first approach is typically used when electronic signatures are requested from users to sign a pre-defined signature field. This signature field is then replaced with the acquired signature image and digitally signed using a digital certificate.

The second approach can be used to acquire a signature image from users in order to insert the signature image as an annotation object to the document. Those annotation objects are stored independently from the document and can be retrieved programmatically.

Signatures as Annotations

Signature annotations can be added using the Manage signatures drop-down in the annotation toolbar:

After placing a signature onto a document, they are part of the annotation collection and can be resized. Using the object handles in the four corners, the aspect ratio is maintained while scaling the signature image. When using the handles located at the borders, the image is scaled horizontally or vertically without keeping the aspect ratio.

Converting Annotations to Images

Annotations are exported separately from the document to provide full flexibility. The following JavaScript method exports the annotations:

The resulting JSON object contains all annotations including the created signature image in form of an SVG (the content is stripped down in the following snippet).

Another blog article explains how to convert the signature annotation into an image server-side.

Learn more

The latest version of the TX Text Control Document Viewer can be used to sign any document with an annotation signature. This sample shows how to merge those SVG images into documents server-side.

Merging Signature Annotations into Documents

In the above sample, the generated JSON object is being sent to an HttpPost Controller method MergeAnnotations:

In the controller method, the SVG signature image representation of each annotation is used to create a new Image object from a MemoryStream. Finally, the image is added to the document at the given location and page number.