Section:

Signature tool in WebViewer

Under the Insert toolbar group, if we select the signature tool, we can click the add signature button which will open the signature modal. Here, users can choose a type of signature and preview it before it is added to the document.

Signatures can be one of three types:

  • Ink Signatures

Users can choose from one of three colors.

Apryse Docs Image
  • Text Signatures

Users can choose from one of three colors, as well as different fonts.

Apryse Docs Image
  • Image Signatures

Users can upload a signature file by dragging and dropping a file, or using the file explorer.

Apryse Docs Image

If there are any saved signatures, clicking the signature button will open an overlay in which signatures can be chosen and applied directly.

Apryse Docs Image

Initials as Signature

Starting in WebViewer 8.9, the Signature tool supports an additional mode for initials as signatures. This new feature is disabled by default, and can be enabled using the following:

JavaScript

1WebViewer({
2  ...
3}).then(instance => {
4  instance.UI.enableFeatures([instance.UI.Feature.Initials]);
5});

If this feature is enabled, the signature modal will also require initials to be added.

  • Ink Signature and Initials

Apryse Docs Image
  • Text Signature and Initials

Apryse Docs Image
  • Image Signature and Initials

Apryse Docs Image

Once created, the signature and intials will be saved in the signatures overlay, allowing users to select between applying signatures or initials.

Apryse Docs Image

Importing existing signatures

If you already have a signature stored for the user, you can import them into the signature tool:

1WebViewer({
2  ...
3}).then(instance => {
4  const { documentViewer } = instance.Core;
5  const signatureTool = documentViewer.getTool('AnnotationCreateSignature');
6
7  documentViewer.addEventListener('documentLoaded', () => {
8    signatureTool.importSignatures([base64Image]);
9  });
10});

You can also save them by calling exportSignatures.

Importing existing initials

Starting in Webviewer 8.9, you can also import and export initials for a user.

You can import them into the signature tool, which will make them available in the saved signatures overlay. Please note you must have this feature enabled in order to view the saved initials in the viewer.

JavaScript

1WebViewer({
2  ...
3}).then(instance => {
4  const { documentViewer } = instance.Core;
5  const signatureTool = documentViewer.getTool('AnnotationCreateSignature');
6
7  documentViewer.addEventListener('documentLoaded', () => {
8    signatureTool.importInitials([base64Image]);
9  });
10});

You can also save them by calling exportInitials.

Adding custom fonts

By default GreatVibes is the only font that is available in the Type tab. More fonts can be added using the setSignatureFonts API. Following is an example that adds Tangerine from Google Fonts to the tab.

The css option is not necessary when adding a web safe font.

CSS

1/* inside stylesheet.css */
2@import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');
1WebViewer({
2  ...
3  css: 'path/to/stylesheet.css'
4}).then(instance => {
5  instance.UI.setSignatureFonts(currentFonts => [
6    ...currentFonts,
7    'Tangerine',
8  ]);
9});

Export a Signature to Blob Storage

If you have created a Signature and you would like to it store for later use, you can export the Signature as a blob and save it to an external storage solution. If you are on WebViewer 8.9 and have Initials enabled, the following code will also save initials as blobs for storage.

1WebViewer({
2  ...
3}).then(instance => {
4  const { annotationManager, documentViewer } = instance.Core;
5
6  documentViewer.addEventListener('annotationsLoaded', async () => {
7      annotationManager.addEventListener('annotationSelected', async (annotationList) => {
8          annotationList.forEach(annotation => {
9              if (annotation.Subject === "Signature")
10                  extractAnnotationSignature(annotation, documentViewer);
11          })
12      })
13  });
14});

Sample Function to export the Signature

JavaScript

1async function extractAnnotationSignature(annotation, docViewer) {
2    // Create a new Canvas to draw the Annotation on
3    const canvas = document.createElement('canvas');
4    // Reference the annotation from the Document
5    const pageMatrix = docViewer.getDocument().getPageMatrix(annotation.PageNumber);
6    // Set the height & width of the canvas to match the annotation
7    canvas.height = annotation.Height;
8    canvas.width = annotation.Width;
9    const ctx = canvas.getContext('2d');
10    // Translate the Annotation to the top Top Left Corner of the Canvas ie (0, 0)
11    ctx.translate(-annotation.X, -annotation.Y);
12    // Draw the Annotation onto the Canvas
13    annotation.draw(ctx, pageMatrix);
14    // Convert the Canvas to a Blob Object for Upload
15    canvas.toBlob((blob) => {
16        // Call your Blob Storage Upload Function
17    });
18}

Related blogs

"Signature" Signatures - Custom Signing Made Easy - 9/29/22

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales