Question

如果源是PDF，则无法在画布中加载Konva Image对象。

没有引发任何错误，但是画布在图像应放置的地方为空白。有任何已知的解决方法吗？欢迎任何建议。

Answer 1

PDF不是图像。这是一种非常复杂的文档格式。您不能直接使用它。

可能您可以使用类似https://mozilla.github.io/pdf.js/的东西来呈现pdf，然后以某种方式使用它。

Answer 2

HTML5画布托管在浏览器中，该浏览器负责将图像从文件数据转换为图像数据。根据经验，如果您可以在浏览器中打开图像（即通过html img标签打开图像，而无需任何特殊插件），则它可能可以在画布上使用，但这取决于功能浏览器。

PDF不是图像格式，而是可编写脚本的富文本文档格式，可以包含不同类型的多媒体内容，包括矢量和位图图形，音频，视频，表格。

如果碰巧要使它正常工作，请对跨设备和跨浏览器测试非常小心。

这不是Konva中的错误。

Answer 3

您能在fabricjs和mozilla pdf之间尝试这种解决方案组合吗？

    /**
     * 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>

无法使用Konva将PDF图像作为Image对象加载到HTML5画布中

3 个答案: