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

Question

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

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

Answer 1

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

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

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

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

Answer 2

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

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

Answer 3

Можете ли вы попробовать эту комбинацию решений между 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>