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

Question

首先，我很感激我的要求非常“雄心勃勃”，但非常感谢任何帮助，因为我不确定继续进行的最佳方式。

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

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

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

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 的坐标，但这应该让您走上正确的轨道。