使用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

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

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

人们犯的主要错误是在 CANVAS 上应用 CSS 比例。如果你的 CSS 比例尺没有在屏幕像素上放置逻辑 CANVAS 像素，你会得到模糊的图像效果。（另请参阅Canvas 绘图和 Retina 显示：可行吗？）

Answer 3

我有同样的问题.刚刚将'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 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