How to improve display quality in pdf.js

Question

I'm using open source library for PDF documents from mozilla(pdf.JS). When i'm trying to open pdf documents with bad quality, viewer displays it with VERY BAD quality.

But if I open it in reader, or in browser (drag/drop into new window), whis document displays well

Is it possible to change? Here is this library on github mozilla pdf.js

Michaelemichaelina

Yes, report it at the github.com/mozilla/pdf.js and provide all information requested at github.com/mozilla/pdf.js/wiki/… – Blowup

Can you post the PDF in question? My guess/asumption is that the font in question is a Type 3 bitmap font and that pdf.js isn't able to do a good job of anti-aliasing it. – Polarimeter

Looks like the pdf is a low res scanned document at library.tuit.uz/Prezident/27.pdf . It looks okay in pdf.js on my computer i.imgur.com/a75PAoq.png – Blowup

I believe there is a solution: #36330602 – Rhymester

Answer 1

Maybe it's an issue related with pixel ratio, it used to happen to me when device pixel ratio is bigger than 1 (for example iPhone, iPad, etc.. you can read this question for a better explanation.

Just try that file on PDF.js Viewer. If it works like expected, you must check how PDF.js works with pixel ratio > 1 here. What library basically does is:

canvas.width = viewport.width * window.devicePixelRatio;
canvas.styles.width = viewport.width + 'px'; // Note: The px unit is required here

But you must check how PDF.js works for better perfomance

Lanyard

Answer 2

You just have to change the scaling of your pdf i.e. when rendering a page:

pdfDoc.getPage(num).then(function(page) {
      var viewport = page.getViewport(scale);
      canvas.height = viewport.height;
      canvas.width = viewport.width;
...

It is the scale value you have to change. Then, the resulting rendered image will fit into the canvas given its dimensions e.g. in CSS. What this means is that you produce a bigger image, fit it into the container you had before and so you effectively improve the resolution.

Montespan

Answer 3

There is renderPage function in web/viewer.js and print resolution is hard-coded in there as 150 DPI.

function renderPage(activeServiceOnEntry, pdfDocument, pageNumber, size) {
  var scratchCanvas = activeService.scratchCanvas;
  var PRINT_RESOLUTION = 150;
  var PRINT_UNITS = PRINT_RESOLUTION / 72.0;

To change print resolution to 300 DPI, simply change the line below.

var PRINT_RESOLUTION = 300;

See How to increase print quality of PDF file with PDF.js viewer for more details.

Marvelous

Answer 4

I ran into the same issue and I used the intent option of renderContent to fix that.

const renderContext = {
    intent: 'print',
    // ....
}
var renderTask = page.render(renderContext);

As per docs renderContext accepts intent which supports three values - display, print or any. The default is display. When I used print instead the render quality was extremely good, at par with any desktop app.

Giroux

Answer 5

  const viewport = page.getViewport({ scale: 4 });
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d') as CanvasRenderingContext2D;
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  canvas.style.scale = `${width / 4000}`
  canvas.style.position = 'absolute';

  await page.render({
    canvasContext: context,
    annotationMode: 0,
    viewport: viewport,
  }).promise;

Alleyn

Answer 6

The question was about a much older version of PDF.JS.

Several versions of PDF.JS over the intervening time, have had intermittent problems with "holes" in accelerated text rendering!

So just to put that source into modern perspective, here is a current view where the middle Firefox render is today much sharper. Thus the source question is in effect now already answered!

However in comparison with true PDF viewers (that use anti-alias for images), see upper and lower rendering, it is perhaps now "too sharp" and less easy on the eye.

Click on the image below to see the normal screen scale view.

Bourgeon