Pdf image quality is bad using pdf.js

Question

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

score 29 · Answer 1 · answered Jul 03 '16 at 04:43

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

the trick is: canvas.width = viewport.width; canvas.style.width = "100%"; the rest can work even without a dedicated container div or explicit height — Luca C., Oct 23 '19 at 05:51

score 9 · Answer 2 · answered Jul 13 '17 at 10:13

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

score 7 · Answer 3 · edited May 23 '17 at 12:18

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?)

score 5 · Answer 4 · answered Oct 23 '19 at 05:54

5

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

answered Oct 23 '19 at 05:54

Luca C.

11,714
1
86
77

it's an hacky trick, easy that for different versions or maybe browser or simply original resolution too low stop working, anyway sometime works :D – Luca C. Mar 24 '21 at 17:57
de-zooming is not working – Charanjit Singh Nov 07 '22 at 11:04

Pdf image quality is bad using pdf.js

4 Answers4

Linked