Signature Annotation in WebViewer Salesforce

Requiring signed documents isn't unfamiliar to Salesforce, Apryse SDK provides an intuitive UI tool for placing custom or hand-drawn signatures onto pdfs. Clicking the signature button in the header will open the signature dialog immediately. Users can also choose to save the signature and preview it before being drawn on the document.

Signatures can be created by:

• drawing

• typing

• uploading an image

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

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

1// Config file
2const { documentViewer } = instance.Core;
3const signatureTool = documentViewer.getTool('AnnotationCreateSignature');
4
5documentViewer.addEventListener('documentLoaded', () => {
6  signatureTool.importSignatures([base64Image]);
7});

1// Config file
2const { docViewer } = instance;
3const signatureTool = docViewer.getTool('AnnotationCreateSignature');
4
5docViewer.on('documentLoaded', () => {
6  signatureTool.importSignatures([base64Image]);
7});

You can also save them by calling exportSignatures.

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.

1/* inside stylesheet.css */
2@import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');

1// WebViewer constructor
2WebViewer({
3  ...
4  css: 'path/to/stylesheet.css'
5})
6
7// Config file
8instance.UI.setSignatureFonts(currentFonts => [
9  ...currentFonts,
10  'Tangerine',
11]);

1// WebViewer constructor
2WebViewer({
3  ...
4  css: 'path/to/stylesheet.css'
5})
6
7// Config file
8instance.setSignatureFonts(currentFonts => [
9  ...currentFonts,
10  'Tangerine',
11]);

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.

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

1// Config file
2const { annotManager, docViewer } = instance;
3
4docViewer.on('annotationsLoaded', async () => {
5    annotManager.on('annotationSelected', async (annotationList) => {
6        annotationList.forEach(annotation => {
7            if (annotation.Subject === "Signature")
8                extractAnnotationSignature(annotation, docViewer);
9        })
10    })
11});

Sample Function to export the Signature

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}