Dave Dave - 24 days ago 8
Javascript Question

For Loop - Changing src every loop

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>

Answer

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