Pixels to PDF coordinates?

Question

How can I find PDF element coordinates using html? I've built a html page that shows a pdf (iframe) and I want to use the mouse-position to find x,y coordinates on the pdf? is that possible?

Here is my current procedure:

1. Converting an existing PDF file into PNG using ImageMagic while specifying a density of 300 DPI.

2. Displaying the PNG as a background image while giving the user an option to create rectangles on that image [new divs]

3. Saving each div's coordinates [top/left] to the database

4. Creating a PDF while using the original PDF as a template using FPDI and TCPDF and applying these coordinates to the PDF, but they are positioned badly and not directly on the PDF.

I know that my saved positions are in pixels while the PDF library uses millimeters but even when I do the conversion the rectangles are positioned badly.

Answer 1

Assuming you can use the pdfinfo tool available on *nix systems, you can determine the size of the PDF file in points

$ pdfinfo a.pdf
Creator:        Writer
Producer:       LibreOffice 5.1
CreationDate:   Tue Jan 23 19:45:15 2018
Tagged:         no
UserProperties: no
Suspects:       no
Form:           none
JavaScript:     no
Pages:          1
Encrypted:      no
Page size:      595 x 842 pts (A4)
Page rot:       0
File size:      36740 bytes
Optimized:      no
PDF version:    1.4

A PDF of size WxH would render to (W * 300 / 72)px x (H * 300 / 72)px at 300DPI. So the example above renders to 2479px x 3508px PNG at 300DPI. Remember: The pixels are rounded to the nearest integer if the calculation results in decimals A single pixel here and there should not affect your final output anyway.

As to where the 72 comes from, go through: https://graphicdesign.stackexchange.com/questions/5859/all-pdfs-appear-to-be-72-dpi-no-matter-what

Finding the mouse position relative to the iframe should be an easy task. I am not answering that part because the question is only for the conversion.