像素到 PDF 坐标？

5 回答

• 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 的鼠标位置应该是一件容易的事。我没有回答那个部分，因为这个问题仅适用于转换。

  回复于 2024-04-20T00:43:35+08:00
• 0

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

  ---

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

  ---

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

  回复于 2024-04-20T00:43:35+08:00
• 0

  我之前做过这个。不能为您提供任何代码，但一般来说，我使用的方法是使用数学公式使其全部工作。

  例如，假设您有一个顶部= 100 且左边= 200 的 pdf 矩形。如果页面是 8.5“x 11”页面，并且我的视口宽度为 10 英寸，我可以将左侧转换为矩形，如下所示：

  10/8.5 * pdf.left

  回复于 2024-04-20T00:43:35+08:00
• 0

  您可以将 iframe 位置设置为绝对值，然后将 x，y 鼠标 pos - iframe pos 转换为 PDF 左上角的原点坐标。我希望有所帮助！如果有滚动，则需要将其添加到滚动轴上的坐标。

  回复于 2024-04-20T00:43:35+08:00
• 0

  我认为这会有所帮助。

  HTML

  <div id="DIV" ></div>
  <iframe id="IFRAME">
  
  </iframe>
  

  CSS

  * {
    padding: 0:
    margin: 0;
    }
  #DIV {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: black;
    color: white;
    width: 100px;
    height:100px;
  }
  #IFRAME {
    position: absolute;
    top: 150px;
    left: 10px;
    background-color: black;
    color: white;
    width: 100px;
    height:100px;
  }
  

  使用 Javascript

  (function() {
      var iframepos = $("#IFRAME").position();
  
      $('#IFRAME').contents().find('html').on('mousemove', function (e) { 
          var x = e.clientX + iframepos.left; 
          var y = e.clientY + iframepos.top;
          console.log('In Side IFRAME');
          console.log(x + " / " + y);
      });
          document.onmousemove = handleMouseMove;
          function handleMouseMove(event) {
              var dot, eventDoc, doc, body, pageX, pageY;
  
              event = event || window.event; // IE-ism
  
              // If pageX/Y aren't available and clientX/Y are,
              // calculate pageX/Y - logic taken from jQuery.
              // (This is to support old IE)
              if (event.pageX == null && event.clientX != null) {
                  eventDoc = (event.target && event.target.ownerDocument) || document;
                  doc = eventDoc.documentElement;
                  body = eventDoc.body;
  
                  event.pageX = event.clientX +
                    (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
                    (doc && doc.clientLeft || body && body.clientLeft || 0);
                  event.pageY = event.clientY +
                    (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
                    (doc && doc.clientTop  || body && body.clientTop  || 0);
              }
  
              console.log(event.pageX + " / " + event.pageY);
              elementMouseIsOver = document.elementFromPoint(event.pageX, event.pageY);
              if(elementMouseIsOver){
                  var theelement  = $("#"+elementMouseIsOver.id);
  
                if(elementMouseIsOver.tagName!= "HTML"){
                  var offset = theelement.offset();
                  console.log("element id : " + elementMouseIsOver.id);
                  console.log("on element");
                  console.log((event.pageX -  offset.left) + " / " + (event.pageY - offset.top));
                }
              }
          }
      })();
  

  jsfiddle

  回复于 2024-04-20T00:43:35+08:00