1

I am unable to load a Konva Image object in my canvas if the source is a PDF.

No errors are thrown but the canvas is blank where the image should be. Are there any known workarounds for this? Any suggestions welcome.

Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67
Lorentz9
  • 131
  • 1
  • 1
  • 6

3 Answers3

2

PDF is not an image. It is a very complex document format. You can't use it directly.

Probably you can use something like this https://mozilla.github.io/pdf.js/ to render pdf and then use it somehow.

lavrton
  • 18,973
  • 4
  • 30
  • 63
2

The HTML5 canvas is hosted in a browser and the browser is responsible for converting images from file data to image data. As a rule of thumb, if you can open an image in your browser, meaning via the html img tag without any special plugins, then it might work with the canvas, but this will be down to the capabilities of the browser.

PDF is not an image format, but a scriptable rich text document format that can contain different types of multimedia content, including vector and bitmap graphics, audio, video, forms.

If you do happen to get this to work, be very careful about cross-device and cross browser testing.

This is not a bug in Konva.

Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67
1

can you try this solution combination between fabricjs and pdf of 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>
tomnyson
  • 189
  • 2
  • 7
  • good job posting the possible answer, however the OP was focussed on Konvajs canvas library. Adding another library to the download list might not be in scope. – Vanquished Wombat Aug 30 '20 at 09:40
  • @tomnyson looks potentially helpful! Could you please guide me how to add comments to the rectangle box added in the code here, if you can? (like adding annotations and comments in adobe acrobat but via browser). I intend to add pdf annotating feature in my web application. Any help will be appreciated – Pushkar Feb 08 '22 at 09:44