Tọa độ lô trên PDF được hiển thị trong iFrame

Question

Trước tiên tôi đánh giá cao yêu cầu của tôi khá "tham vọng", nhưng bất kỳ trợ giúp nào đều được đánh giá cao vì tôi không chắc chắn cách tốt nhất để tiếp tục.

Trên trang web của tôi (được xây dựng bằng PHP/MySQL) sau khi người dùng tải lên tệp PDF, tôi muốn hiển thị nội tuyến PDF trên trang (tôi giả định trong iFrame). Sau đó tôi cần chúng để có thể kéo ra một số "hộp" trên đầu trang của PDF (tôi giả định với jQuery). Sau đó tôi cần phải ghi lại các tọa độ của hộp này để sau đó tôi có thể tạo lại PDF để chèn văn bản mới vào các "hộp" được xác định.

Điều này nghe có khả thi không? Nếu bạn không đề nghị điều gì khác? (xin đừng nói tưởng tượng!)

Tôi biết cách tạo lại một tệp PDF chèn văn bản mới, nhưng vấn đề của tôi là cách cho phép người dùng ghi lại các tọa độ đó.

Answer 1

Bạn có thể sử dụng PDF.js để hiển thị tệp PDF trên trang. PDF.js sẽ hiển thị nó như là một phần của trang để bạn có thể đính kèm các sự kiện và tương tác với nó theo những cách bạn không thể nếu nó được hiển thị bởi plugin Acrobat.

Tôi không thể tìm thấy thư viện từ trước để nhận tọa độ vì vậy tôi đã đánh mã này để triển khai.

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ạn sẽ phải tinh chỉnh nó để có được tọa độ mà có liên quan đến PDF khi bạn hiển thị nó, nhưng điều này sẽ giúp bạn đi đúng hướng.