Plotkoordinaten als PDF im iFrame

Question

Zuerst bin ich dankbar, dass meine Anfrage ziemlich "ehrgeizig" ist, aber jede Hilfe wird sehr geschätzt, da ich mir nicht sicher bin, wie ich am besten vorgehen soll.

Auf meiner Website (mit PHP/MySQL erstellt) nachdem ein Benutzer ein PDF hochgeladen hat, möchte ich das PDF inline auf der Seite anzeigen (ich nehme an, in einem iFrame). Ich brauche sie dann, um eine Anzahl von "Boxen" über das PDF ziehen zu können (ich gehe von jQuery aus). Ich muss dann die Koordinaten dieser Box aufzeichnen, damit ich später die PDF neu erstellen kann und neuen Text in die definierten "Boxen" einfüge.

Hört sich das an? Wenn nicht, was würdest du sonst vorschlagen? (Bitte sag nicht imagemagick!)

Ich weiß, wie man eine PDF-Datei erstellt, die neuen Text einfügt, aber mein Problem ist, wie man dem Benutzer erlaubt, diese Koordinaten aufzuzeichnen.

Answer 1

Sie können PDF.js verwenden, um das PDF auf der Seite zu rendern. PDF.js zeigt sie als Teil der Seite an, sodass Sie Ereignisse anhängen und mit ihnen auf eine Weise interagieren können, die nicht möglich wäre, wenn sie vom Acrobat-Plug-in angezeigt würde.

Ich konnte keine vorhergehende Bibliothek finden, um die Koordinaten zu bekommen, also habe ich diesen Code ausgepackt, um ihn zu implementieren.

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

Sie werden es haben zwicken Koordinaten zu erhalten, die den PDF bezüglich sobald Sie es angezeigt, aber das sollte man auf dem richtigen Weg zu bekommen.