Программа просмотра PDF частично не отображает изображение на экране сетчатки - PullRequest
Новая
       38

Программа просмотра PDF частично не отображает изображение на экране сетчатки

1 голос
/ 23 октября 2019

Я использую pdf.js в своем веб-приложении для рендеринга pdf-файлов.

Я заметил, что зритель частично не может отобразить изображение, только когда devicePixelRatio больше 1.

Моя цель - рендерить pdf файлы, сохраняя devicePixelRatio.

Пожалуйста, помогите.

PDF.js версия: стабильная (v2.1.266)

Вот мой код:

index.html 

<div class="pdf-viewer">
  <div id="pageContainer" class="pdf-page"></div>
</div>

index.js 

pdfjsLib.workerSrc = '/vendor/assets/pdfjs/build/pdf.worker.js'
var pdfDoc;
var scale = 1;

var loadingTask = pdfjsLib.getDocument({
  url: #{pdf-url},
  cMapUrl: '/cmaps/',
  cMapPacked: true
})

loadingTask.promise.then(function(pdf){
  pdfDoc = pdf;
  var viewer = document.getElementById('pageContainer')
  for(page = 1; page <= pdf.numPages; page++){
    var canvas = document.createElement('canvas');
    if(page == pdf.numPages){
      canvas.className =  'pdf-page-canvas d-block m-auto'
    }else{
      canvas.className =  'pdf-page-canvas d-block m-auto pb-2'
    }
    viewer.appendChild(canvas);
    renderPage(page, canvas, viewer)
  }
})

function renderPage(pageNum, canvas, container){
  pdfDoc.getPage(pageNum).then(function(page){
    var originalViewPort = page.getViewport({scale: scale})
    var aspectScale;
    var isLandscape = true;
    if(originalViewPort.height > originalViewPort.width){
      isLandscape = false;
    }
    if(isLandscape){
      aspectScale = Math.max((container.clientWidth / originalViewPort.width), (container.clientHeight / originalViewPort.height))
    }else{
      aspectScale = Math.min((container.clientWidth / originalViewPort.width), (container.clientHeight / originalViewPort.height))
    }
    var viewport = page.getViewport({scale: aspectScale})
    var ctx = canvas.getContext('2d')
    canvas.width = (originalViewPort.width * aspectScale) * window.devicePixelRatio
    canvas.height = (originalViewPort.height * aspectScale) * window.devicePixelRatio        
    canvas.style.width = String(originalViewPort.width * aspectScale) + "px";
    canvas.style.height = String(originalViewPort.height * aspectScale) + "px";
    ctx.scale(window.devicePixelRatio,window.devicePixelRatio)  
    page.render({canvasContext: ctx, viewport: viewport});
  })
}

Снимок экрана ожидаемого поведения: image1

Снимок экрана фактического поведения: image2

...