在iFrame中显示的PDF上的绘图坐标

首先，我感谢我的要求非常“雄心勃勃”，但任何帮助都非常感谢，因为我不确定最好的方法。

在用户上传PDF后我的网站（使用PHP / MySQL构建）我想在页面上显示PDF内嵌（我假设在iFrame中）。 然后我需要它们能够在PDF上拖出一些“盒子”（我假设使用jQuery）。 然后，我需要记录此框的坐标，以便稍后我可以重新创建PDF，将新文本注入已定义的“框”。

这听起来可行吗？ 如果没有，你会建议什么？ （请不要说imagemagick！）

我知道如何重新创建PDF注入新文本，但我的问题是如何允许用户记录这些坐标。

Answer 1

您可以使用PDF.js在页面上呈现PDF。 PDF.js会将其显示为页面的一部分，因此您可以附加事件并以Acrobat插件显示的方式进行交互。

我找不到一个预先存在的库来获取坐标，所以我掀起了这个代码来实现它。

选择代码的现场演示

$(function () { "use strict"; var startX, startY, selectedBoxes = [], $selectionMarquee = $('#selectionMarquee'), positionBox = function ($box, coordinates) { $box.css( 'top', coordinates.top ).css( 'left', coordinates.left ).css( 'height', coordinates.bottom - coordinates.top ).css( 'width', coordinates.right - coordinates.left ); }, compareNumbers = function (a, b) { return a - b; }, getBoxCoordinates = function (startX, startY, endX, endY) { var x = [startX, endX].sort(compareNumbers), y = [startY, endY].sort(compareNumbers); return { top: y[0], left: x[0], right: x[1], bottom: y[1] }; }, trackMouse = function (event) { var position = getBoxCoordinates(startX, startY, event.pageX, event.pageY); positionBox($selectionMarquee, position); }; $(document).on('mousedown', function (event) { startX = event.pageX; startY = event.pageY; positionBox($selectionMarquee, getBoxCoordinates(startX, startY, startX, startY)); $selectionMarquee.show(); $(this).on('mousemove', trackMouse); }).on('mouseup', function (event) { var position, $selectedBox; $selectionMarquee.hide(); position = getBoxCoordinates(startX, startY, event.pageX, event.pageY); if (position.left !== position.right && position.top !== position.bottom) { $selectedBox = $('
'); $selectedBox.hide(); $('body').append($selectedBox); positionBox($selectedBox, position); $selectedBox.show(); selectedBoxes.push(position); $(this).off('mousemove', trackMouse); } }); }); 

一旦显示，您将不得不调整它以获得相对于PDF的坐标，但这应该让您走上正确的轨道。