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:

Signature Annotations

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.

Signature Annotations

Converting Annotations to Images

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

var annotations = TXDocumentViewer.annotations.export();
console.log(annotations);
view raw test.js hosted with ❤ by GitHub

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).

[
[
{
"pen":{
"type":"signature",
"objectWidth":610.5943718592965,
"objectHeight":91.08343547003311
},
"user":"Unknown User",
"location":{
"x":68.99999999999994,
"y":215.27083588675077
},
"time":1672227773157,
"comments":[
],
"id":"88270017-1a12-44e2-97a1-1e03a4253ea5",
"image":"data:image/svg+xml;utf8,..."
}
],
[
],
[
]
]
view raw test.json hosted with ❤ by GitHub

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:

function storeAnnotations() {
var annotations = TXDocumentViewer.annotations.export();
var obj = JSON.parse(annotations);
var serviceURL = '@Url.Action("MergeAnnotations", "Home")';
$.ajax({
type: 'POST',
url: serviceURL,
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify(obj),
success: successFunc,
error: errorFunc
});
function successFunc(data, status) {
TXDocumentViewer.loadDocument(data.data, 'results.tx');
}
function errorFunc() {
alert('error');
}
}
view raw test.js hosted with ❤ by GitHub

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.

[HttpPost]
public string MergeAnnotations() {
Stream inputStream = Request.InputStream;
inputStream.Position = 0;
StreamReader str = new StreamReader(inputStream);
string sBuf = str.ReadToEndAsync().Result;
List<List<TXTextControl.SignatureAnnotation.Annotation>> annotations =
JsonConvert.DeserializeObject<List<List<TXTextControl.SignatureAnnotation.Annotation>>>(sBuf);
byte[] bTx;
int iPageNumber = 0;
string prePng = "data:image/png;base64,";
string preSvg = "data:image/svg+xml;utf8,";
// calculate the current resolution
var dpi = 1440 / DocumentController.DpiX;
// create temporary ServerTextControl
using (ServerTextControl tx = new ServerTextControl()) {
tx.Create();
// load the document
tx.Load(Server.MapPath("~/App_Data/Documents/template_sign.tx"), StreamType.InternalUnicodeFormat);
// loop through the array of annotations
foreach (List<TXTextControl.SignatureAnnotation.Annotation> pages in annotations) {
iPageNumber++;
foreach (TXTextControl.SignatureAnnotation.Annotation annotation in pages) {
// handle only signatures
if (annotation.pen.type != "signature")
continue;
byte[] bytes;
// get SVG or PNG as bytes and remove the prefix
if (annotation.image.StartsWith(prePng))
bytes = Convert.FromBase64String(annotation.image.Remove(0, prePng.Length));
else
bytes = Encoding.UTF8.GetBytes(annotation.image.Remove(0, preSvg.Length));
// create a memory stream from SVG
using (MemoryStream ms = new MemoryStream(
bytes, 0, bytes.Length, writable: false, publiclyVisible: true)) {
// TX image from memory stream
TXTextControl.Image img = new TXTextControl.Image(ms);
// add the image as a fixed object on the current page (array)
tx.Images.Add(
img,
iPageNumber,
new System.Drawing.Point(0, (int)(annotation.location.y * dpi)),
TXTextControl.ImageInsertionMode.BelowTheText | TXTextControl.ImageInsertionMode.FixedOnPage);
// set the location
img.Location = new System.Drawing.Point(
(int)(annotation.location.x * dpi),
img.Location.Y);
}
}
}
// save the document as PDF
tx.Save(out bTx, TXTextControl.BinaryStreamType.InternalUnicodeFormat);
}
// return as base64 encoded string
return Convert.ToBase64String(bTx);
}
view raw test.cs hosted with ❤ by GitHub