像素到PDF坐标？

Question

如何使用html查找PDF元素坐标？我已经建立了一个显示pdf（iframe）的html页面，并且我想使用鼠标位置在pdf上找到x，y坐标？那可能吗？

这是我目前的程序：

1. ImageMagic在指定density300 DPI的同时 使用将现有的PDF文件转换为PNG 。

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

3. 将每个div的坐标[顶部/左侧]保存到数据库

4. 在使用原始PDF作为模板的同时创建PDF时，会使用FPDI and TCPDF这些坐标并将其应用于PDF，但是它们的位置很差，而不是直接位于PDF上。

我知道我保存的位置在pixels使用PDF库时，millimeters 但是即使进行转换，矩形的位置也很差。

Answer 1

假设您可以使用pdfinfo*nix 系统上提供的工具，您可以确定 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

尺寸为宽x高的 PDF 将以(W * 300 / 72)px x (H * 300 / 72)px300DPI 渲染。因此上面的示例2479px x 3508px以 300DPI 渲染为 PNG。请记住：如果计算结果为小数，则像素将四舍五入到最接近的整数。无论如何，这里或那里的单个像素不应影响您的最终输出。

至于72来自哪里，请浏览：https://graphicdesign.stackexchange.com/questions/5859/all-pdfs-appear-to-be-72-dpi-no-matter-what

查找鼠标相对于 iframe 的位置应该是一项简单的任务。我不回答这部分，因为问题只是为了转换。

Answer 2

根据您的评论，您在 html 中使用 PNG 图像来显示图像，但不直接显示 pdf...在这种情况下，最好的方法是使用 html canva div，然后使用类似的方法来获取鼠标坐标。

假设您的pdf中的左边距和上边距保持不变，那么您需要在第一次手动比较pdf大小和图像大小，然后您可以使用javascript函数来转换“画布内的鼠标位置”到“ pdf文件中的预期位置”，但在我看来这绝对不是最好的方法。

为什么不使用viewerjs或pdf.js直接在html页面中显示PDF？（而不是将 PDF 转换为图像然后显示图像文件）