Signature fields accept bitmap or vector images as signature representations during the signing process. When the Document Viewer is used to sign documents, the acquired signature image is returned in form of an SVG image that can be combined with a dynamically created SVG signature stamp.

In the following screenshot, the signature image (SVG) is created dynamically using the name of the signer and the unique document ID in combination with the acquired signature representation.

Signature Data

In this sample, the following SVG is generated dynamically based on the signature data returned by the Document Viewer. Customized signature stamps are typically used to beautify the representation or when printing documents to secure the signature against forgery. The following features are used to generate the image:

  • Overlapping, rotated names repeated in a grid pattern
  • Randomly highlighted names (the random number sequence could be stored to regenerate the original)

As this process is very flexible, more features such as time stamps or other information could be integrated.

Signature Data

The forwarded SignatureData object contains meta data about the signature and the signed document:

Signature Data

The class SignatureStamp provides the static method Create that returns an SVG image based on given parameters:

Key Value description
size The destination size of the SVG image.
name The name of the signer that is used to generate the background.
fontSize The size of the font that is used.
signatureSVG The SVG signature representation.
documentID A unique ID that is rendered in the upper left corner.
color The color of the name that is rendered in the background.
highlightColor The highlight color of the name that is rendered in the background.
offsetX The horizontal distance between each rendered name instance in the background.
offsetY The vertical distance between each rendered name instance in the background.
highlights Number of highlighted names that are randomly distributed.

The following code snippet shows how to call the SignatureStamp.Create method to generate a background signature stamp:

var signatureImage = System.Text.Encoding.UTF8.GetString(
Convert.FromBase64String(data.SignatureImage));
var stamp = TXTextControl.Esign.SignatureStamp.Create(
new Size(600, 250),
data.Name,
12,
signatureImage,
data.UniqueId,
Color.LightGray,
Color.Magenta,
80, 12, 10);
// create a memory stream from SVG
using (MemoryStream ms = new MemoryStream(
stamp, 0, stamp.Length, writable: false, publiclyVisible: true)) {
foreach (SignatureField field in tx.SignatureFields) {
field.Image = new SignatureImage(ms);
}
}
view raw test.cs hosted with ❤ by GitHub

The Create method itself is building an SVG image based by calculating the required name instances, the random highlight locations and the position of the included signature representation. You can download the complete classes in our GitHub repository.

public class SignatureStamp {
public static byte[] Create(
Size size,
string name,
float fontSize,
string signatureSVG,
string documentID = "",
Color? color = null,
Color? highlightColor = null,
int offsetX = 70,
int offsetY = 20,
int highlights = 10) {
// default colors
color = color ?? Color.LightGray;
highlightColor = highlightColor ?? Color.Blue;
// write svg header
string sSvgImage = "<?xml version=\"1.0\" encoding=\"utf-8\"?><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 " + size.Width.ToString() + " " + size.Height.ToString() + "\" xml:space=\"preserve\">";
int countOffsetX = -offsetX;
int countOffsetY = 0;
int countX = 0;
int countY = 0;
// generate
int[][] positions = CreateRandomPositions(size, offsetX, countOffsetY, offsetY, 10);
// loop through all rows
do {
string textColor;
// loop through all columns
do {
// change highlight color based on random positions
if (Array.Exists(positions, element => (element[0] == countX) && (element[1] == countY)))
textColor = HexConverter(highlightColor);
else
textColor = HexConverter(color);
// render the text
sSvgImage += "<g><text style=\"font-size: " + fontSize.ToString() + "px; font-family: Arial; fill: " + textColor + ";\" transform=\"matrix(1 -0.17 0.17 1 " + countOffsetX.ToString() + " " + countOffsetY.ToString() + ")\">" + name + "</text><text style=\"font-size: " + fontSize.ToString() + "px; font-family: Arial; fill: " + textColor + ";\" transform=\"matrix(1 -0.17 0.17 1 " + (countOffsetX + 30).ToString() + " " + (countOffsetY + 0.4).ToString() + ")\">" + name + "</text></g>";
// increase offset
countOffsetX += offsetX;
countX++;
} while (countOffsetX < size.Width + offsetX);
countOffsetY += offsetY;
countOffsetX = -offsetX;
countY++; countX = 0;
} while (countOffsetY < size.Height + offsetY);
// do all required calculations in Signature object
var signature = new Signature(signatureSVG, size);
// center the signature in stamp
var posX = (size.Width - (signature.Size.Width * signature.ScalingFactor)) / 2;
var posY = (size.Height - (signature.Size.Height * signature.ScalingFactor)) / 2;
sSvgImage += "<g transform=\"scale(" + signature.ScalingFactor + ") translate(" + posX + " " + posY + ")\">";
// render the signature
sSvgImage += signatureSVG;
sSvgImage += "</g>";
// adding document ID
sSvgImage += "<g transform=\"translate(10 20)\"><text style=\"font-family: Arial; fill: #000;\">Document ID: " + documentID + "</text></g>";
// close the SVG
sSvgImage += "</svg>";
// return the SVG as a byte array
return Encoding.ASCII.GetBytes(sSvgImage);
}
}
view raw stamp.cs hosted with ❤ by GitHub

Custom Signature Fields

Signature fields can be completely customized during the signing process. This live demo shows how to generate an SVG server-side based on the created user signature image. Test this live in our online demos.

Launch Demo