# Get coordinates of X and Y of the signature image

**URL:** <https://pdfjs.community/t/get-coordinates-of-x-and-y-of-the-signature-image/1221>\
**Category:** Technical Support\
**Created:** [December 6, 2021, 11:18pm UTC](https://pdfjs.community/t/get-coordinates-of-x-and-y-of-the-signature-image/1221 "2021-12-06T23:18:03Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![user36](https://avatars.discourse-cdn.com/v4/letter/u/8797f3/32.png) [@user36](https://pdfjs.community/u/user36)\
**Post date:** [December 6, 2021, 11:18pm UTC](https://pdfjs.community/t/get-coordinates-of-x-and-y-of-the-signature-image/1221/1 "2021-12-06T23:18:03Z")

</div>

**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](http://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](http://pdfjs.express)

Would appreciate your support in this case

Thank you  
Gentian

**Code snippet**

```javascript
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)
  }

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [December 6, 2021, 11:18pm UTC](https://pdfjs.community/t/get-coordinates-of-x-and-y-of-the-signature-image/1221/3 "2021-12-06T23:18:07Z")

</div>

**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:
- [Add signatures to PDFs](https://pdfjs.express/documentation/signature/signature-tool)
- [Creating custom annotations for your viewer - Stamp image settings (optional)](https://pdfjs.express/documentation/annotation/custom-annotations.8#stamp-image-settings-(optional))
- [Understand coordinates in PDF.js Express - PDF page coordinates](https://pdfjs.express/documentation/viewer/coordinates.8#pdf-page-coordinates)

APIs:
- [Core.Annotations.SelectionAlgorithm - boundingRectTest(annotation, x, y, zoom)](https://pdfjs.express/api/Core.Annotations.SelectionAlgorithm.html#boundingRectTest__anchor)
- [Core.Math.Rect - new Rect(x1, y1, x2, y2)](https://pdfjs.express/api/Core.Math.Rect.html#Rect__anchor)
- [Core.DocumentViewer - getColorSeparationsAtPoint(pageNumber, x, y)](https://pdfjs.express/api/Core.DocumentViewer.html#getColorSeparationsAtPoint__anchor)

Forums:
- [Position of Signature Tools Areas](https://pdfjs.community/t/position-of-signature-tools-areas/942/1)
- [Is there an event for when signatures get placed onto a PDF?](https://pdfjs.community/t/is-there-an-event-for-when-signatures-get-placed-onto-a-pdf/1080/1)
- [Problem with initialization viewer](https://pdfjs.community/t/problem-with-initialization-viewer/825/1)

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [December 9, 2021, 4:01pm UTC](https://pdfjs.community/t/get-coordinates-of-x-and-y-of-the-signature-image/1221/4 "2021-12-09T16:01:20Z")

</div>

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.

```javascript
  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:

```javascript
  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

---

<div class="post-metadata">

**Author:** ![user36](https://avatars.discourse-cdn.com/v4/letter/u/8797f3/32.png) [@user36](https://pdfjs.community/u/user36)\
**Post date:** [December 9, 2021, 10:46pm UTC](https://pdfjs.community/t/get-coordinates-of-x-and-y-of-the-signature-image/1221/5 "2021-12-09T22:46:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [December 13, 2021, 7:57pm UTC](https://pdfjs.community/t/get-coordinates-of-x-and-y-of-the-signature-image/1221/6 "2021-12-13T19:57:36Z")

</div>

Hi there,

You can use the [Document.getPageInfo](https://pdfjs.express/api/Core.Document.html#getPageInfo__anchor) to get the width and height of a page.

To get an instance of document, use the [getDocument](https://pdfjs.express/api/Core.DocumentViewer.html#getDocument__anchor) API.

Thanks,  
Logan

---

<div class="post-metadata">

**Author:** ![user36](https://avatars.discourse-cdn.com/v4/letter/u/8797f3/32.png) [@user36](https://pdfjs.community/u/user36)\
**Post date:** [December 13, 2021, 9:01pm UTC](https://pdfjs.community/t/get-coordinates-of-x-and-y-of-the-signature-image/1221/7 "2021-12-13T21:01:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [December 13, 2021, 9:06pm UTC](https://pdfjs.community/t/get-coordinates-of-x-and-y-of-the-signature-image/1221/8 "2021-12-13T21:06:13Z")

</div>

Hey there,

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

---

<div class="post-metadata">

**Author:** ![user36](https://avatars.discourse-cdn.com/v4/letter/u/8797f3/32.png) [@user36](https://pdfjs.community/u/user36)\
**Post date:** [December 13, 2021, 9:12pm UTC](https://pdfjs.community/t/get-coordinates-of-x-and-y-of-the-signature-image/1221/9 "2021-12-13T21:12:37Z")

</div>

Sure I will thank you @Logan

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [December 15, 2021, 4:15pm UTC](https://pdfjs.community/t/get-coordinates-of-x-and-y-of-the-signature-image/1221/10 "2021-12-15T16:15:56Z")

</div>