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

Question

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

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

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

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

Answer 1

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

我找不到用于获取坐标的预先存在的库，因此我编写了这段代码来实现它。

Live demo of selection code

$(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 = $('<div class="selected-box"></div>');
                $selectedBox.hide();
                $('body').append($selectedBox);

                positionBox($selectedBox, position);

                $selectedBox.show();

                selectedBoxes.push(position);

                $(this).off('mousemove', trackMouse);
            }
    });
});

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