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

将画布放在包装器<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 2

我遇到了同样的问题。刚刚将'scale'属性从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 3

看起来你的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 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

使用pdf.js，Pdf图像质量很差

4 个答案: