Add dynamic signature from images gallery

[xander.as90]

Hi.

I want make this

Whats-App-Image-2022-07-14-at-09-59-10

I have a button and this open a modal, inside there are a images gallery and when the user click on image and after click in Accept button I want add this image how signature and manipulate inside the pdftron.

I have the follow code:

const { Tools, documentViewer } = webViewer.Core;
const signatureTool = documentViewer.getTool('AnnotationCreateSignature');
await signatureTool.setSignature(base64Image);
await signatureTool.showPreview();

And I have the image into the cursor, but I cant do it drop into the document loaded into pdftron. Please help me.

Best regards.

[system]

Hello, I’m Ron, an automated tech support bot

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:

• API for digital signatures on Cross-Platform (Core)
• Code samples to redact PDFs on Cross-Platform (Core)
• Code samples to edit PDFs on Cross-Platform (Core)
• Code samples for searching PDF text or images on Cross-Platform (Core)

APIs:

• Class SignatureWidget - CreateSignatureAppearance(Image)
• Class Image - Export(String)
• Namespace pdftron - PDFNet

Forums:

• Firebase cloud functions integrate with PDFtron SDK
• How do I create a digital signature annotation and set its appearance?
• Customising header in React Native

[tgordon]

Hello xander.as90,

Welcome to the PDFTron Community Forum!

We have a couple of guides on signatures here:

• PDFTron Systems Inc. | Documentation
• PDFTron Systems Inc. | Documentation

However to place the signature on the document after you have used setSignature() you can call addSignature()
Like this code snippet:

  signatureTool.addEventListener('locationSelected', () => {
    signatureTool.setSignature(base64Image);
    signatureTool.addSignature();
    instance.UI.closeElements(['signatureModal']);
  });

Let me know if this works for you!

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

[xander.as90]

Hi, thanks for answering.

Well my idea is simulate the drag and drop (seals, signatures) from modal inside there are images, this can be used to sign the document.

Today I try everything and without successfully.

Help me please.

Best regards.

[tgordon]

Hello xander.as90,

While I am not sure on the specifics on how you want the app to function, you could:

1. On the modal open, display the signatures and seals,
2. When you select the signature, then click “accept”
3. Then it sets the signature of the tool (using setSignature(seal/signature))
4. Then the tool has the signature which you can then place on the document
   a. you could have the user place it with their cursor, which is the default placement
   b. or you could have it programmatically place on the document with the code snippet i sent above

Does this sound correct?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

[xander.as90]

Is correct.

But in the section 4 the user when clicked into document the drop the signature/seal previous selected.

Best Regards.

[tgordon]

Hello xander.as90,

You can implement the drag and drop by extending the mouseLeftDown, mouseLeftUp, and mouseMove functions on the SignatureCreateTool, heres a guide on extending functionality: PDFTron Systems Inc. | Documentation

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron