使用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);
});
}

- ryo.ss

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';

- user2840912

---

诀窍在于： canvas.width = viewport.width; canvas.style.width = "100%"; 即使没有专用容器div或明确的高度，其余部分也可以正常工作。 - Luca C.

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);
});

- Wiesio Pie

Answer 3

看起来你的问题在于你的PAGE_SCALE=1。这意味着你只是告诉渲染器以PDF单位（后者为1/72英寸）等于px的方式渲染页面。PDF单位中典型的页面尺寸为612x792。现今大多数显示器的dpi为110-146。如果你想在你的3008x1692屏幕上获得一个页面，你需要将比例设置为2.0-5.0倍。

人们经常犯的一个主要错误是在CANVAS上应用CSS缩放。如果你的CSS缩放不能将逻辑CANVAS像素放置在屏幕像素上，那么你会得到模糊的图像效果。(另见Canvas drawing and Retina display: doable?)

- async5

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

- Luca C.

---

这是一个巧妙的技巧，对于不同版本、浏览器或者原始分辨率太低的情况可能会停止工作，但是有时候它确实有效 :D - Luca C.

取消缩放功能无法正常工作。 - Charanjit Singh