Невозможно загрузить изображения PDF в холст HTML5 как объект изображения с помощью Konva - PullRequest
Новая
       40

Невозможно загрузить изображения PDF в холст HTML5 как объект изображения с помощью Konva

0 голосов
/ 05 февраля 2019

Я не могу загрузить объект Konva Image в свой холст, если источником является PDF.

Не выдается никаких ошибок, но холст пустой, где должно быть изображение.Есть ли известные обходные пути для этого?Любые предложения приветствуются.

Ответы [ 3 ]

0 голосов
/ 05 февраля 2019

Холст HTML5 размещается в браузере, и браузер отвечает за преобразование изображений из данных файла в данные изображения.Как правило, если вы можете открыть изображение в браузере, то есть с помощью тега html img без каких-либо специальных плагинов, то оно может работать с холстом, но это будет зависеть от возможностейбраузер

PDF - это не формат изображения, а форматированный текстовый документ с возможностью написания сценариев, который может содержать различные типы мультимедийного контента, включая векторную и растровую графику, аудио, видео, формы.

Если вам все-таки удалось заставить это работать, будьте очень внимательны при тестировании на нескольких устройствах и на разных браузерах.

Это не ошибка в Konva.

0 голосов
/ 17 июля 2019

вы можете попробовать эту комбинацию решений между fabricjs и pdf из mozilla 

    /**
     * Displays next page.
     */
    function onNextPage() {
      if (pageNum >= pdfDoc.numPages) {
        return;
      }
      prevPageNum = pageNum;
      pageNum++;
      queueRenderPage(pageNum);
    }
    document.getElementById('next').addEventListener('click', onNextPage);
    
    /**
     * Asynchronously downloads PDF.
     */
    pdfjsLib.getDocument(url).then(function(pdfDoc_) {
      pdfDoc = pdfDoc_;
      document.getElementById('page_count').textContent = pdfDoc.numPages;
    
      // Initial/first page rendering
      renderPage(pageNum);
    });
    
    // Adding a rectangle
    jQuery(function($) {
      $("#addRectangle").click(function() {
        fCanvas.add(new fabric.Rect({
          left: 100,
          top: 100,
          fill: 'red',
          width: 20,
          height: 20
        }));
      });
    });
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
    
    <h1>PDF.js Previous/Next example</h1>
    
    <div>
      <input type="button" id="addRectangle" value="Add Signature">
    
      <button id="prev">Previous</button>
      <button id="next">Next</button>
      &nbsp; &nbsp;
      <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
    </div>
    
    <canvas id="the-canvas"></canvas>
0 голосов
/ 05 февраля 2019

PDF это не изображение.Это очень сложный формат документа.Вы не можете использовать его напрямую.

Возможно, вы можете использовать что-то вроде этого https://mozilla.github.io/pdf.js/ для рендеринга PDF, а затем использовать его каким-либо образом.

...