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

Pdf image quality is bad using pdf.js

本文关键字：pdf 图像质量 js 使用      更新时间：2023-09-26

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

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

我遇到了同样的问题。刚刚将"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);
});

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

人们犯的主要错误是在画布上应用CSS比例。如果您的 CSS 比例没有在屏幕像素上放置逻辑 CANVAS 像素，您将获得模糊的图像效果。(另请参阅画布绘图和视网膜显示：可行吗？

我通过在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
相关文章：