How to find a specific zone in the pdf and render some image at those exact coordinates.

[Xenope]

Hello guys,

need some help with a problem we have.

We generate some PDF with pupeeter based on some HTML templates. It could be invoices, quotes, reports ... anything.
Our goal is to be able to add a handwritten signature (consider it as an image representing it) at specific coordinates. (i.e. in a specific zone on the last page of the PDF).

How could we do that?

This is our approach :

• put a specific zone in the HTML template (could be a div, span anything)
• generate the PDF with pupeeter
• open it with PDF-lib and find the coordinates of this zone ( an HTML < div > in our example).
• put the image of the signature on this exact coordinates and save the PDF.

We have two problems:

• it's quite difficult to get our < div > in the PDF stream (we used a specific background color in order to find it).
• the coordinates we get from the PDF seems a little bit off. If we add a rectangle at that position it is not rendered were we want on that page. You can check it below : the x axis of the red square is returning the position 0 but when we draw a new rectangle at this position it looks like this :

It seems that the coordinates we get from the PDF does not take margin into accounts.
Some advices on this approach? Are we missing something?

Any help would be appreciated.