Рендеринг нескольких страниц PDF в один Canvas с использованием pdf.js и ImageData

Question

Я пытаюсь сделать PDF на одном холсте, я ссылался на ссылку ниже, чтобы реализовать то же самое.

Посещение: рендеринг.pdf на один холст с использованием pdf.js и 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]);
        }
    });

Я вижу пространство, созданное для рендеринга страницы, где pdf не отображается.

любая помощь была бы значительно оценена. Благодарю.

Answer 1

Ваш код для хранения pageStarts ссылается на "i", как если бы это был индекс итератора, но он находится в операторе for с использованием pNum. Я удивлен, что этот код не выдает ошибки в консоли, указывающие на возможное решение. Вы должны изменить:

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

что-то вроде:

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

Обратите внимание, что я реорганизовал вычисление canvasHeight до тех пор, пока вы не захватите "последнее" значение. Это позволит вам определить правильную начальную высоту для данных изображения текущей страницы без необходимости использовать pageStart для предыдущей итерации.

Это непроверенное решение, так как вы не опубликовали остальную часть кода, но оно должно привести вас к вашему решению.

Answer 2

Вот несколько страниц просмотра с 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>