Please give a brief summary of your issue:
We’re trying to get the signature annotation from the signature panel so that we can set it as signature.
So the user can immediately add the selected signature to the signing fields.
Thank you for contacting WebViewer Support. You can do something like the following
const signatureTool = instance.docViewer.getToolModeMap().AnnotationCreateSignature;
const saveSignatures = signatureTool.getSavedSignatures();
// you can copy the annotation in the signature panel and add it to the annotation manager
const copyOfAnnot = annotationManager. getAnnotationCopy(saveSignatures[0]);
// can also use getPreview to get a base64 string of the signature
// const base64Signature = await signatureTool.getPreview(saveSignatures[0]);
You will mainly want to use the getSavedSignatures and either copy the saved annotation and get a base 64 string of it.
Please let me know if the above helps or if you want me to clarify something
Best Regards,
Andrew Yip
Software Developer
PDFTron Systems, Inc. www.pdftron.com
Thanks for the quick response.
How do I get the signature that the user clicked?
For example, if the user clicked on “Signature 1”, I would like to find that signature annotation.
I checked Signature Tool’s events and none of them are working for me.
Ah by the way, this is the code that I was using to immediately allow users to sign with just a click. It will only work with the 1st signature though:
You can use the annotationChanged event to get the newly added annotation
You can also see what button was pressed by doing the following
Webviewer({}, document.getElementById('viewer')).then(async (instance) => {
const { annotManager, docViewer } = instance;
const wvIframe = document.querySelector('#viewer > iframe');
// can listen for the "visibilityChanged" events to see when the popup shows up
wvIframe.contentWindow.addEventListener('visibilityChanged', (e) => {
const { isVisible, element } = e.detail;
if (isVisible && element === 'toolStylePopup') {
// use setTimeout to wait for UI to update
setTimeout(() => {
const signaturePanel = wvIframe.contentDocument.querySelector('.tab-panel[data-element="savedFullSignaturePanel"]');
if (signaturePanel) {
signaturePanel.querySelectorAll('.signature-row').forEach((row, index) => {
row.querySelector('.signature-row-content').addEventListener('click', () => {
// can know which button was pressed using "index"
// can use "instance.docViewer.getTool('AnnotationCreateSignature').getSavedSignatures()[index]"
});
});
}
}, 50);
}
});
});
Let me know if the above helps or if you want me to clarify something
Best Regards,
Andrew Yip
Software Developer
PDFTron Systems, Inc. www.pdftron.com
I used the code you provided as a guide and it is working wonderfully.
Thanks a lot!
One last thing, is it possible to remove this behavior where when I click on a signature in the signature panel, the annotation will get attached to my mouse?
Or when we create a new signature from the modal, it will automatically get attached to my mouse.
I want to avoid that since we only want users to attach their signatures in the signature fields, and this behavior will allow them to place their signatures anywhere.
