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

Posted 2023-03-25

【中文标题】无法使用 Konva 将 PDF 图像作为图像对象加载到 HTML5 画布中

【英文标题】：Unable to load PDF images into HTML5 canvas as Image object using Konva

【发布时间】：2019-06-28 18:31:52

【问题描述】：

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

没有引发错误，但画布应该是空白的图像。是否有任何已知的解决方法？欢迎提出任何建议。

【问题讨论】：

您能否查看答案并接受其中一个答案，如果它回答了您的问题？

【参考方案1】：

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

也许你可以使用类似https://mozilla.github.io/pdf.js/ 的东西来渲染 pdf，然后以某种方式使用它。

【参考方案2】：

html5 画布托管在浏览器中，浏览器负责将图像从文件数据转换为图像数据。根据经验，如果您可以在浏览器中打开图像，即通过 html img 标签而不需要任何特殊插件，那么它可能可以与画布一起使用，但这将取决于功能的浏览器。

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

如果你碰巧让它工作，请非常小心跨设备和跨浏览器测试。

这不是 Konva 中的错误。

【参考方案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>

【讨论】：

很好地发布了可能的答案，但是 OP 专注于 Konvajs 画布库。将另一个库添加到下载列表可能不在范围内。

@tomnyson 看起来很有帮助！如果可以的话，您能否指导我如何将 cmets 添加到此处代码中添加的矩形框中？ （例如在 adobe acrobat 中添加注释和 cmets，但通过浏览器）。我打算在我的网络应用程序中添加 pdf 注释功能。任何帮助将不胜感激