Get coordinates of X and Y of the signature image

Technical Support
1

PDF.js Express Version

  1. Build: “MTAvMjEvMjAyMXw2OGY2MTQ1NWU=”
  2. Core version: “8.1.1”
  3. Full API: false
  4. UI version: “8.1.0”
  5. WebViewer Server: false

Detailed description of issue

I am trying to test out pdfjs.express for the needs of our project and
following the documentation I am a little bit lost, would like to get your
support in this case.

I am trying to implement the fill and sign feature and with this I need
to clarify the below questions:

  1. If I have a custom image already predefined as signature, how can I add it
  2. After placing a signature how to get the X and Y coordinates
  3. How to get the Width and Height of the signature image
  4. How to retrieve the page number that the signature was places

As well as I am finding difficulties to implement the Sign Here feature

I am using Angular@10 for implementing pdfjs.express

Would appreciate your support in this case

Thank you
Gentian

Code snippet

loadViewer(file) {
    WebViewer({
      path: '../../../../assets/static/lib',
    }, this.viewer.nativeElement)
    .then(instance => {
      instance.UI.loadDocument(file, { filename: file.name });
      
      this.wvInstance = instance;
      this.viewer.nativeElement.addEventListener('pageChanged', (e) => {
        const [ pageNumber ] = e.detail;
        console.log(`Current page is ${pageNumber}`);
      });
      // or from the docViewer instance
      instance.docViewer.on('annotationsLoaded', (e) => {
        console.log('annotations loaded', e);
      });

      
    });
  }

  getCoordinates(){
    const { Annotations } = this.wvInstance;
    let field = new Annotations.Forms.Field('Signature', { type: "Sig" });
    let sig = new Annotations.SignatureWidgetAnnotation(field);

    console.log(sig.getX())
    console.log(sig)
  }
3

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

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

Guides:APIs:Forums:

4

Hey there!

Thanks for trying out PDF.js Express.

  1. To add an image as a signature, you can use the importSignatures api. It accepts a base 64 string, so you need to load your predefined image as a base64 string and pass it in.
  const { documentViewer } = instance.Core;
  const signatureTool = documentViewer.getTool('AnnotationCreateSignature');

  documentViewer.addEventListener('documentLoaded', () => {
    signatureTool.importSignatures([base64string]);
  });

2 & 3 & 4) There are many many ways to do this, but the easiest is to listen to the annotationChanged event and get the coordinates of the new signature like this:

  const {  annotationManager } = instance.Core;

  annotationManager.addEventListener('annotationChanged', (annots, action) => {
    if(action === 'add') {
      for(const annot of annots) {
        if(annot.Subject === 'Signature') {
          const { X, Y, Width, Height, PageNumber } = annot;

          console.log({ X, Y, Width, Height, PageNumber })
        }
      }
    }
  })

Hope this helps! Let me know if you have any other questions.

Thanks,
Logan

5

Hi @Logan

Thank you for your support it really helped me a lot.

I need as well as to find the Left X, Right X, Top Y and Bottom Y, Scale Factor
So in this case I will need the Page Height, Page Width

As well as if a user has used the signature tool from the editor, how can I retrieve that image
that he has drawn.

Thank you
Gentian

6

Hi there,

You can use the Document.getPageInfo to get the width and height of a page.

To get an instance of document, use the getDocument API.

Thanks,
Logan

7

Thank you @Logan for the support.

What about the second query of the thread above on to retrieve the signature as an image that the user has drawn on the tool it self.

Thank you

8

Hey there,

Please open a new topic for that question (it helps for discoverability) - thanks!

9

Sure I will thank you @Logan

1 Like