Współrzędne wykresu na PDF wyświetlane w iFrame

Question

Po pierwsze, doceniam, że moja prośba jest dość "ambitna", ale każda pomoc jest bardzo ceniona, ponieważ nie jestem pewien, jak najlepiej postępować.

Na mojej stronie (zbudowanej z PHP/MySQL) po przesłaniu przez użytkownika pliku PDF, chciałbym wyświetlić plik PDF na stronie (zakładam, że w iFrame). Następnie potrzebuję ich, aby móc przeciągnąć szereg "pól" na górze pliku PDF (zakładam, że z jQuery). Następnie muszę zapisać współrzędne tego pola, a następnie mogę ponownie utworzyć plik PDF wstrzykiwania nowego tekstu do zdefiniowanych "pudełek".

Czy to możliwe? Jeśli nie, co jeszcze byś zasugerował? (proszę nie mówić imagemagick!)

Wiem, jak odtworzyć PDF wstrzykiwania nowego tekstu, ale moim problemem jest to, jak zezwolić użytkownikowi na zapisanie tych współrzędnych.

Answer 1

Można użyć PDF.js do renderowania pliku PDF na stronie. Plik PDF.js wyświetli go jako część strony, dzięki czemu możesz dołączać zdarzenia i wchodzić z nim w interakcję w sposób, w jaki nie byłby możliwy, gdyby był wyświetlany przez wtyczkę Acrobat.

Nie mogłem znaleźć istniejącej biblioteki do uzyskania współrzędnych, więc pobiłem ten kod, aby go zaimplementować.

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

Będziesz musiał dostosować go, aby uzyskać współrzędne, które odnoszą się do formatu PDF raz ją wyświetlić, ale to powinno Ci na dobrej drodze.