javascript - 像素到 PDF 坐标？

Question

如何使用 html 查找 PDF 元素坐标？我已经构建了一个显示 pdf (iframe) 的 html 页面，我想使用鼠标位置在 pdf 上查找 x、y 坐标？这可能吗？

这是我目前的程序:

1. 使用 ImageMagic 将现有的 PDF 文件转换为 PNG同时指定一个 density 300 DPI。

2. 将 PNG 显示为背景图像，同时为用户提供在该图像上创建矩形的选项 [新 div]

3. 将每个 div 的坐标 [top/left] 保存到数据库

4. 使用 FPDI and TCPDF 创建 PDF，同时使用原始 PDF 作为模板并将这些坐标应用于 PDF，但它们的位置很糟糕，没有直接在 PDF 上。

我知道我保存的位置在 pixels 中而 PDF 库使用 millimeters但即使我进行了转换，矩形的位置也很糟糕。

Answer 1

假设您可以使用 *nix 系统上可用的 pdfinfo 工具，您可以确定 PDF 文件的大小(以磅为单位)

$ 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

尺寸为 WxH 的 PDF 将在 300DPI 下呈现为 (W * 300/72)px x (H * 300/72)px。因此，上面的示例以 300DPI 呈现为 2479px x 3508px PNG。 请记住:如果计算结果为小数，像素将四舍五入为最接近的整数无论如何，这里和那里的单个像素应该不会影响您的最终输出。

至于72从哪里来，通过:https://graphicdesign.stackexchange.com/questions/5859/all-pdfs-appear-to-be-72-dpi-no-matter-what

找到鼠标相对于 iframe 的位置应该是一件容易的事。我不回答那部分，因为问题仅针对转换。