Plot coordinates on PDF displayed in iFrame

Question

Firstly I appreciate my request is quite "ambitious", but any help is greatly appreciated as I'm not sure the best way to proceed.

On my site (built with PHP/MySQL) after a user has uploaded a PDF I would like to display the PDF inline on the page (I'm assuming in an iFrame). I then need them to be able to drag out a number of "boxes" on top of the PDF (I'm assuming with jQuery). I then need to record the co-ordinates of this box so then later I can re-create the PDF injecting new text into the defined "boxes".

Does this sound feasible? If not what else would you suggest? (please don't say imagemagick!)

I know how to recreate a PDF injecting new text, but my issue is with how to allow the user to record those coordinates.

Mace

Answer 1

You could use PDF.js to render the PDF on the page. PDF.js will display it as part of the page so you can attach events and interact with it in ways you could not if it was being displayed by the Acrobat plugin.

I couldn't find a preexisting library for getting the coordinates so I whipped up this code to implement it.

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);
            }
    });
});

You will have to tweak it to get coordinates that are relative to the PDF once you display it, but this should get you on the right track.

Undistinguished

Thank you so much for this answer and example, that's beyond anything I was expecting/hoping for! I will give it a try when I get some time tomorrow (hopefully) and let you know how I get on. – Mace

I have found when implementing this code and targeting the canvas displaying the PDF rather than the whole document is causing the "mouseup" event to fail. If I take out the code to draw the box as you drag it works but obviously I would prefer to keep this in place. I will keep testing this myself but I have uploaded an example in case you know what may be causing this @UselessCode. tarakan.chapmanio.co.uk/pdf/pdf.html – Mace

@Mace : Did you manage to implement a solution with that code ? I'm facing exactly the same problem. – Salema

@Mace - Another bump on this thread to see if you found a solution. I am heading down the same path and would love to share in your victory :) – Puisne

how would map these co-ordinates to actual PDF? – Haldes

i am in the same boat. this examples returns pixels, however on PDF it needs to be in points. – Coeternity