0

I'm trying to load pdfs and render every single page into a canvas. It works when I'm only loading a one paged .pdf but not when I'm using a multiple page .pdf

The for-loop is supposed to run as often as there are pages in the pdf,

var total =

Every loop I'm creating a 

<canvas class=''></canvas>

which should have the matching page number as class.

can.className = 'pdfpage' + i

But for some reason it always gets the total page count as class. E.g. when loading a five paged .pdf it creates...

<canvas class='pdfpage5'></canvas>

...5 times and not 'pdfpage0', 'pdfpage1', etc.

I'm pretty new to JS so I'm not exactly sure if I'm thinking in the right direction with 'i'. I added 

console.log('i is: ' + i);

to confirm that i really adds +1 every turn.

<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript" src='./jsPDF/jspdf.js'></script>
<script src="./jsPDF/plugins/addimage.js"></script>
<script src="./jsPDF/plugins/png_support.js"></script>
<script src="./jsPDF/plugins/canvas.js"></script>
<script type="text/javascript" src='./FileSaver.js-master/FileSaver.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<div id='1'>
<input id='pdf' type='file'/>
<script type="text/javascript">
PDFJS.disableWorker = true;
var pdf = document.getElementById('pdf');
pdf.onchange = function(ev) {
  if (file = document.getElementById('pdf').files[0]) {
    fileReader = new FileReader();
    fileReader.onload = function(ev) {
      console.log(ev);
      PDFJS.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) {
        var total = pdf.numPages;
        for (var i = 0; i < total; i++) {
        console.log('i is: ' + i);
        console.log('total pages: ' + total);
        //
        // Fetch the first page
        //
        console.log(pdf)
        pdf.getPage(i + 1).then(function getPageHelloWorld(page) {
          var scale = 1.0;
          var viewport = page.getViewport(scale);
          //
          // Prepare canvas using PDF page dimensions
          //
          var div = document.getElementById('1');
          var can = document.createElement('canvas');
            can.className = 'pdfpage' +i;
            div.appendChild(can);
          canvas = document.getElementsByClassName('pdfpage' +i);
          var context = canvas[0].getContext('2d');
          canvas[0].height = viewport.height;
          canvas[0].width = viewport.width;
          //
          // Render PDF page into canvas context
          //
          var task = page.render({canvasContext: context, viewport: viewport})
          task.promise.then(function(){
            console.log(canvas[0].toDataURL('image/jpeg'));
            var dataURL = canvas[0].toDataURL('image/jpeg');                

          });
        });
        }
      }, function(error){
        console.log(error);
      });
    };
    fileReader.readAsArrayBuffer(file);
  }
}
 </script>
</div>
4

1 回答 1

0

Try this, it should add the required the classnames

<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript" src='./jsPDF/jspdf.js'></script>
<script src="./jsPDF/plugins/addimage.js"></script>
<script src="./jsPDF/plugins/png_support.js"></script>
<script src="./jsPDF/plugins/canvas.js"></script>
<script type="text/javascript" src='./FileSaver.js-master/FileSaver.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<div id='1'>
<input id='pdf' type='file'/>
<script type="text/javascript">
PDFJS.disableWorker = true;
var pdf = document.getElementById('pdf');
pdf.onchange = function(ev) {
  if (file = document.getElementById('pdf').files[0]) {
    fileReader = new FileReader();
    fileReader.onload = function(ev) {
      console.log(ev);
      PDFJS.getDocument(fileReader.result).then(function getPdfHelloWorld(pdf) {
        var total = pdf.numPages;
        for (var i = 0; i < total; i++) {
        console.log('i is: ' + i);
        console.log('total pages: ' + total);
        //
        // Fetch the first page
        //
        console.log(pdf)
        pdf.getPage(i + 1).then(function getPageHelloWorld(page) {
          var scale = 1.0;
          var viewport = page.getViewport(scale);
          //
          // Prepare canvas using PDF page dimensions
          //
          var div = document.getElementById('1');
          var can = document.createElement('canvas');
            can.className = 'pdfpage' +(page.pageIndex + 1);
            div.appendChild(can);
          canvas = document.getElementsByClassName('pdfpage' +(page.pageIndex + 1));
          var context = canvas[0].getContext('2d');
          canvas[0].height = viewport.height;
          canvas[0].width = viewport.width;
          //
          // Render PDF page into canvas context
          //
          var task = page.render({canvasContext: context, viewport: viewport})
          task.promise.then(function(){
            console.log(canvas[0].toDataURL('image/jpeg'));
            var dataURL = canvas[0].toDataURL('image/jpeg');                

          });
        });
        }
      }, function(error){
        console.log(error);
      });
    };
    fileReader.readAsArrayBuffer(file);
  }
}
 </script>
</div>

Basically, all I have done is replace i with page.pageIndex +1 in the callback function

于 2016-11-14T13:35:17.860 回答