CODEWITHSUNDEEP
javascriptjquerycanvastodataurlpdf.js
Alessandro Clarea
Alessandro Clarea

Reputation: 25

Javascript Pdfjs Canvas to Img

I've a problem to convert canvas to img.. What's the best approach to use toDataURL() and insert it in img src? when I launch the script it gives me the correct canvas but the img is blank.. this is my code:

<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='//code.jquery.com/jquery-2.2.3.js'></script>
<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
</head>
<body>
<div id='anteprima' ></div>
<div id='anteprima_img' ></div>

<script type="text/javascript">
var file = 'http://www.businessmodelgeneration.com/downloads/businessmodelgeneration_preview.pdf';
pdftoimg(file, 1, 0.5, 'anteprima');

function pdftoimg(file, num, scale2, idd) {
    PDFJS.disableWorker = true;
    PDFJS.getDocument(file).then(function(pdf) {
        pdf.getPage(num).then(function(page) {
            var canvas = document.createElement('canvas');
            canvas.id = 'pag' + num;
            canvas.className = 'grande';
            canvasContainer = document.getElementById(idd);
            var context = canvas.getContext('2d');
            var viewport = page.getViewport(scale2);
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
            canvasContainer.appendChild(canvas);

            var dataUrl = canvas.toDataURL();
            image = document.createElement('img');
            image.src = dataUrl;
            $('#anteprima_img').html(image);


        });
    });
};

</script>
</body>
</html>

Upvotes: 2

Views: 4062

Answers (1)

Chirag Goyal
Chirag Goyal

Reputation: 118

Your code is perfectly fine, you need to just wait for render canvas before converting it to data URL.

    page.render(renderContext).then(function(){
    
        // code for converting data url
    
    });

[NOTE this code only works for PDF.js version 1 prior to version 2 when there was a major change in syntax]

<!DOCTYPE HTML>
<html>

<head>
  <script type='text/javascript' src='//code.jquery.com/jquery-2.2.3.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.9.426/pdf.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</head>

<body>
  <div id='anteprima'></div>
  <div id='anteprima_img'></div>

  <script type="text/javascript">
    var file = 'https://pdfobject.com/pdf/sample-3pp.pdf';
    pdftoimg(file, 1, 0.5, 'anteprima');

    function pdftoimg(file, num, scale2, idd) {
      PDFJS.disableWorker = true;
      PDFJS.getDocument(file).then(function(pdf) {
        pdf.getPage(num).then(function(page) {
          var canvas = document.createElement('canvas');
          canvas.id = 'pag' + num;
          canvas.className = 'grande';
          canvasContainer = document.getElementById(idd);
          var context = canvas.getContext('2d');
          var viewport = page.getViewport(scale2);
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          var renderContext = {
            canvasContext: context,
            viewport: viewport
          };
          page.render(renderContext).then(function() {
            canvasContainer.appendChild(canvas);
            var dataUrl = canvas.toDataURL();
            image = document.createElement('img');
            image.src = dataUrl;
            $('#anteprima_img').html(image);
          });
        });
      });
    };
  </script>
</body>

</html>

Upvotes: 3

Related Questions