使用 pdf.js 的 PDF 图像质量很差

Question

我正在使用 pdf.js。

但是，PDF 的图像质量很差。

请告诉我解决方法。

var TARGET_PAGE = 1; 
var PAGE_SCALE = 1; 

function viewPDF(targetPage,pageScale){

PDFJS.getDocument(targetPath).then(function (pdf) {
    return pdf.getPage(targetPage);
}).then(function (page) {
    var scale = pageScale;
    var viewport = page.getViewport(scale);
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    var renderContext = {
        canvasContext: context,
        viewport: viewport
    };
    page.render(renderContext);
        document.body.appendChild(canvas);
});
}

Answer 1

您的 PAGE_SCALE=1 似乎有问题。你只是告诉渲染一个 px 等于 PDF 单位的页面（后者是 1/72 英寸）。 PDF 单位的典型页面大小为 612x792。现在大多数显示器都是 110-146 dpi。如果您想在 3008x1692 屏幕上显示页面，您将看到 2.0-5.0 倍的比例。

人们犯的主要错误是在 CANVAS 上应用 CSS 比例。如果您的 CSS 比例没有在屏幕像素上放置逻辑 CANVAS 像素，您将获得模糊的图像效果。 （另见Canvas drawing and Retina display: doable?）

Answer 2

只需将画布放在包装器<div> 中，并设置其相对于包装器的渲染大小。然后，您可以将画布的逻辑大小设置为与视口一样大，以实现高 dpi，而无需更改其在屏幕上的实际大小。例如，

var scale = 5;
var viewport = page.getViewport(scale);
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = "100%";
canvas.style.height = "100%";
wrapper.style.width = Math.floor(viewport.width/scale) + 'pt';
wrapper.style.height = Math.floor(viewport.height/scale) + 'pt';

Answer 3

我也遇到了同样的问题。只需将“比例”属性从 1 更改为 2，质量就提高了。

pdfDoc.getPage(1)
  .then(function (page) {
       var canvas = document.getElementById('myCanvas');
       var ctx = canvas.getContext('2d');

       var viewport = page.getViewport(2); // 2 is the 'scale' attr
       canvas.height = viewport.height;
       canvas.width = viewport.width;

       var renderContext = {
              canvasContext: ctx,
              viewport: viewport
       };

       page.render(renderContext);
});

Answer 4

我通过在 getViewport 中缩放比例来让它工作，然后用 css 样式去缩放画布：

var viewport = page.getViewport(10);//paint with zoom 10X to reach "high definition" PDF drawing
canvas.width = viewport.width;//keep high definition drawing canvas
canvas.style.width = "100%";//de-zoom canvas with style (maybe you can directly use CSS), reaching de-zoom of higher definition PDF