2

私はpdfを単一のキャンバスにレンダリングしようとしています。以下のリンクを参照して同じものを実装しました。

訪問: pdf.js と ImageData を使用して .pdf を単一の Canvas にレンダリングする

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が表示されていないページをレンダリングするためのスペースが作成されていることがわかります。

どんな助けでも大歓迎です。ありがとう。

4

2 に答える 2

0

pageStarts を格納するコードは、イテレータ インデックスであるかのように "i" を参照しますが、pNum を使用する for ステートメント内にあります。このコードがコンソールにエラーをスローせず、可能な解決策を示していることに驚いています。変更する必要があります：

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

次のようなものに：

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

「最後の」値を取得するまで、canvasHeight の計算を再編成したことに注意してください。これにより、前の反復で pageStart を使用しなくても、現在のページ イメージ データの正しい開始高さを決定できます。

残りのコードを投稿していないため、これはテストされていないソリューションですが、ソリューションにつながるはずです。

于 2014-01-22T17:19:48.900 に答える
-1

これは、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>
于 2014-11-03T00:58:53.423 に答える