Coordinate di stampa su PDF visualizzate in iFrame

Question

Innanzitutto apprezzo che la mia richiesta sia abbastanza "ambiziosa", ma qualsiasi aiuto è molto apprezzato in quanto non sono sicuro che sia il modo migliore di procedere.

Sul mio sito (creato con PHP/MySQL) dopo che un utente ha caricato un PDF, vorrei visualizzare il PDF in linea sulla pagina (sto assumendo in un iFrame). Ho quindi bisogno che siano in grado di trascinare un certo numero di "scatole" sopra il PDF (sto assumendo con jQuery). Devo quindi registrare le coordinate di questa casella, quindi in seguito potrò ricreare il PDF iniettando un nuovo testo nelle "caselle" definite.

Questo suono è possibile? Se no, che altro suggeriresti? (per favore non dire imagemagick!)

So come ricreare un PDF iniettando un nuovo testo, ma il mio problema è come consentire all'utente di registrare quelle coordinate.

Answer 1

È possibile utilizzare PDF.js per eseguire il rendering del PDF sulla pagina. PDF.js lo visualizzerà come parte della pagina in modo da poter allegare eventi e interagire con esso in modi che non potresti se fosse visualizzato dal plug-in Acrobat.

Non sono riuscito a trovare una libreria preesistente per ottenere le coordinate, quindi ho implementato questo codice per implementarlo.

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

Si dovrà modificarlo per ottenere le coordinate che sono relativi al PDF, una volta si visualizza, ma questo dovrebbe farti sulla strada giusta.