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         


        

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

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

Answer 3

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

Answer 4

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