使用pdf.js的pdf图像质量很差 [英] Pdf image quality is bad using pdf.js

问题描述

我正在使用pdf.js.

I am using pdf.js.

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

But, image quality of PDF is low quality.

请告诉我解决方法.

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，而无需更改其在屏幕上的实际大小.例如，

Just put the canvas inside a wrapper <div>, and set its rendered size relative to the wrapper. Then you can set the logical size of the canvas as large as the viewport to achieve high dpi without changing its actual size on the screen. For example,

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

这篇关于使用pdf.js的pdf图像质量很差的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！