Pdf image quality is bad using pdf.js

问题

I am using pdf.js.

But, image quality of PDF is low quality.

Please tell me solution method.

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

回答1:

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

回答2:

I've had the same issue. Just changed 'scale' attribute from 1 to 2 and the quality went way up.

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

回答3:

Looks like the problem with your PAGE_SCALE=1. You just telling to render a page with px equal to PDF unit (the latter is 1/72 inch). Typical page size in PDF units is 612x792. Most of displays are 110-146 dpi nowadays. and if you want to get a page on your 3008x1692 screen, you will be looking at scale 2.0-5.0 times.

Major mistake people do is applying CSS scale on the CANVAS. If your CSS scale does not place logical CANVAS pixel on screen pixels, you will get blurry image effect. (See also Canvas drawing and Retina display: doable?)

回答4:

I let it work by zooming the scale in getViewport, an then de-zooming the canvas with css style:

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

来源：https://stackoverflow.com/questions/35400722/pdf-image-quality-is-bad-using-pdf-js

标签

javascript

pdf

pdf.js