使用 pdf.js 和 ImageData 将多页 pdf 渲染到单个 Canvas

Question

我正在尝试将 pdf 渲染到单个画布上，我参考了以下链接来实现相同的操作。

访问：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]);
        }
    });

我看到空间被创建来呈现不显示 pdf 的页面。

任何帮助将不胜感激。谢谢。

Answer 1

您用于存储 pageStarts 的代码引用“i”，就好像它是一个迭代器索引一样，但它位于使用 pNum 的 for 语句中。我很惊讶这段代码不会在控制台中抛出错误，将您指向可能的解决方案。你应该改变：

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>