Rendering multiple pages of pdf to single Canvas using pdf.js and ImageData

Question

I am trying to render pdf onto the single canvas, I referred to the below link to implement the same.

Visit: Render .pdf to single Canvas using pdf.js and ImageData

var pdf = null;

    PDFJS.disableWorker = true;
    var pages = new Array();
   var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    var scale = 1.5;
    var canvasWidth = 0;
    var canvasHeight = 0;
    var pageStarts = new Array();
    pageStarts[0] = 0;


    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdf) {
        debugger;
        pdf = _pdf;
        //Render all the pages on a single canvas
        for (var pNum = 1; pNum <= pdf.numPages; pNum++) {
            pdf.getPage(pNum).then(function getPage(page) {
                var viewport = page.getViewport(scale);
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                page.render({ canvasContext: context, viewport: viewport });
                pages[pNum - 1] = context.getImageData(0, 0, canvas.width, canvas.height);
                canvasHeight += canvas.height;
                pageStarts[i] = pageStarts[i - 1] + canvas.height;


            });
        }

        canvas.width = canvasWidth;
        canvas.height = canvasHeight;

        for (var i = 0; i < pages.length; i++) {
            context.putImageData(pages[i], 0, pageStarts[i]);
        }
    });

I see space is created to render the page where as pdf is not displayed.

any help would greatly appreceated. Thanks.

Answer 1

Your code to store the pageStarts references "i" as if it was an iterator index, but it is in a for statement using pNum. I'm surprised that this code doesn't throw errors in the console pointing you to the possible solution. You should change:

canvasHeight += canvas.height;
pageStarts[i] = pageStarts[i - 1] + canvas.height;

to something like:

pageStarts[pNum - 1] = canvasHeight;
canvasHeight += canvas.height;

Notice that I reorganized the canvasHeight calculation until after you've grabbed the "last" value. This will allow you to determine the correct starting height for the current page image data without having to use the pageStart for the previous iteration.

This is an untested solution since you didn't post the rest of the code, but it should lead you towards your solution.

Answer 2

Here is multiple page view with textLayer

<script type="text/javascript">
window.onload = function () {
  var url = '[[*pdf]]';
  var scale = 1.1; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
  var currPage = 1; //Pages are 1-based not 0-based
  var numPages = 0;
  var thePDF = null;
  PDFJS.workerSrc = '/js/build/pdf.worker.js';
  PDFJS.getDocument(url).then(function(pdf){
    thePDF = pdf;
    numPages = pdf.numPages;
    pdf.getPage(1).then(handlePages);
  });
  function handlePages(page){
    var viewport = page.getViewport(scale);
    var pdfPage = document.createElement('div');
    pdfPage.className = 'pdfPage';
    var pdfContainer = document.getElementById('pdfContainer');

    var canvas = document.createElement( "canvas" );
    canvas.style.display = "block";
    var context = canvas.getContext('2d');
    var outputScale = getOutputScale(context);
    canvas.width = (Math.floor(viewport.width) * outputScale.sx) | 0;
    canvas.height = (Math.floor(viewport.height) * outputScale.sy) | 0;
    context._scaleX = outputScale.sx;
    context._scaleY = outputScale.sy;
    if (outputScale.scaled) {
      context.scale(outputScale.sx, outputScale.sy);
    }

    // The page, canvas and text layer elements will have the same size.
    canvas.style.width = Math.floor(viewport.width) + 'px';
    canvas.style.height = Math.floor(viewport.height) + 'px';

    pdfPage.style.width = canvas.style.width;
    pdfPage.style.height = canvas.style.height;
    pdfPage.appendChild(canvas);

    var textLayerDiv = document.createElement('div');
    textLayerDiv.className = 'textLayer';
    textLayerDiv.style.width = canvas.style.width;
    textLayerDiv.style.height = canvas.style.height;
    pdfPage.appendChild(textLayerDiv);

    page.render({canvasContext: context, viewport: viewport});

    var textLayerPromise = page.getTextContent().then(function (textContent) {
      var textLayerBuilder = new TextLayerBuilder({
        textLayerDiv: textLayerDiv,
        viewport: viewport,
        pageIndex: 0
      });
      textLayerBuilder.setTextContent(textContent);
    });

    pdfContainer.appendChild(pdfPage);

    currPage++;
    if ( thePDF !== null && currPage <= numPages ){thePDF.getPage( currPage ).then( handlePages );}
  }
}
</script>