How to save signatures with colors and thickness?

[a.shablovskii]

WebViewer Version: 11.10.0

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No, I think is not
Is your issue related to annotations? Yes

Please give a brief summary of your issue:
WebViewer: Persisting signatures — events, colors and stroke thickness lost after import

Please describe your issue and provide steps to reproduce it:

Hi! I have several questions related to how signatures work.

I have the following requirement: to store user signatures on the server so that even if a user signs in from another device, they can reuse all of their signatures.

For displaying signatures, I use the standard Signature List. For creating signatures, I also use the standard modal (via instance.UI.openElements(['signatureModal'])).

After creating a signature, I can see it being added to the Signature List — so far, everything works as expected. However, complications start after that.

1. In order to detect the appearance of a new signature (not an annotation on the page, but specifically a signature in the Signature List), I currently have to use setInterval and repeatedly call code like this:

const signatureTool =
instance.Core.documentViewer.getToolModeMap().AnnotationCreateSignature;

const exported = await signatureTool.exportSignatures();

This leads to the following question: Is there any event that allows detecting when a new signature is added?

2. I receive the array of signatures and store it on the server as-is. When the user later loads the application, I fetch the saved data from the server and add everything back to the Signature List using:

const signatureTool =
instance.Core.documentViewer.getToolModeMap().AnnotationCreateSignature;

await signatureTool.importSignatures(signatureList);

The import works, but all signatures end up having the same color — the color of the last created signature.

This leads to the most important question: what is the correct way to save and restore signatures so that they appear in the Signature List with their original colors and stroke thickness preserved?

ChatGPT and Cursor were not able to help with this — they rely on methods that seem to be either made up or outdated, and the limited TypeScript typings of the library only make things more confusing.

Signature List just after creation:

End this is after imported from server:

Please provide a link to a minimal sample where the issue is reproducible: no link

[system]

Hello, I’m AiRon, an automated tech support bot
While you wait for one of our customer support representatives, I can help you with your question.

It sounds like you are trying to persist user signatures across sessions and devices while maintaining their original appearance, including color and stroke thickness. This can be challenging if the library’s export and import functions do not automatically handle these attributes.

Some things you can try:

• Use the exportSignatures method to obtain signature data and save it to your server. Ensure this data includes appearance settings like color and thickness.


• To detect when a new signature is added, consider using a custom event or a callback function instead of setInterval. Unfortunately, there isn’t a built-in event for detecting new signatures, so a workaround might be necessary.


• When importing signatures using importSignatures, ensure that the signature data being restored includes all necessary appearance attributes, and that the import function is correctly applying them.


• Check if the signature data format supports storing custom properties such as color and thickness. You might need to extend the data model to include these properties.


• If the issue persists, you may need to manually apply style properties after importing signatures to ensure they display correctly in the Signature List.

Here are some resources that might help you:

• Signature Tool in WebViewer: Learn how to work with the signature tool in WebViewer, including importing and exporting signatures.


• Creating Custom Annotations for Your Viewer: This guide can help with saving custom properties like color and thickness in annotations.


• Best Practices: Improving WebViewer Performance & More: Offers insights into handling data persistence and real-time updates.

Hopefully, this helps you solve your problem while you wait for a human to get back to you.

[kkim]

Hi there,

This leads to the following question: Is there any event that allows detecting when a new signature is added?

You can use the signatureSaved event on the SignatureCreateTool for this, please see API here:
https://sdk.apryse.com/api/web/Core.Tools.SignatureCreateTool.html#event:signatureSaved__anchor

Here’s an example prototype using localStorage to export/import the signatures:

const instance = WebViewer.getInstance();
const { Core, UI } = instance;
const { annotationManager, documentViewer, Tools, Annotations, PDFNet } = Core

const signatureTool = documentViewer.getTool(Tools.ToolNames.SIGNATURE)

signatureTool.addEventListener('signatureSaved', async () => {
  const exportedSignaturesData = await signatureTool.exportSignatures();
  console.log('signatureData', exportedSignaturesData);
  localStorage.setItem(
    'signatures',
    JSON.stringify(exportedSignaturesData)
  );
});

documentViewer.addEventListener('documentLoaded', async () => {
  const savedSignatures = localStorage.getItem('signatures');
  if (savedSignatures) {
    const signaturesData = JSON.parse(savedSignatures);
    await signatureTool.importSignatures(signaturesData);
  }
});

Best regards,

Kevin