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.
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.
The forwarded SignatureData object contains meta data about the signature and the signed document:
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); | |
} | |
} |
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); | |
} | |
} |
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.