PDF is blurry when zoomed out

Technical Support
1

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.7.4

Detailed description of issue
In some pdfs, zooming out blurs the pdf.
The blurring becomes stronger when the magnification is set to less than 100%.
The blurring often occurs when the devicePixelRatio of the display I am using is 1.
Accordingly, I tried using setCanvasMultiplier, but the blurring is not improved.
How can I improve the blurring?
I have attached the relevant PDF.

Expected behaviour
When the magnification is less than 100% and the devicePixelRatio of the display being used is 1, the pdf is displayed without blurring.

Does your issue happen with every document, or just one?
some document (not every, not just one)

blurry-pdfjsexpress.pdf (698.0 KB)

sample-blurry.pdf (567.8 KB)

3

Thank you for posting the incident to our forum. We will provide you with an update as soon as possible.

1 Like
4

Hello dev1,

Can you provide any sample photos of the blurriness?
You tried setCanvasMultipier, did you try to rerender after doing this?

Best regards,
Tyler

1 Like
5

As shown in the code below, after setCanvasMultiplier, loadDocument is done and rerender is done. image quality did not change whether loadDocument was done or not.

        webViewer(
          {
            path: '/pdfjsexpress',
            initialDoc: path,
            licenseKey: key,
            extension: 'pdf',
            disabledElements,
          },
          viewerRef.value
        )
          .then((inst) => {
            // use APIs here
            inst.Core.setCanvasMultiplier(2)
            inst.loadDocument(path)
            instance = inst
          })

Also, as shown in the attached pdf, the pdf is hazy when setCanvasMultiplier is done and blurry when setCanvasMultiplier is not done. Either way the pdf is hard to read.Zoom magnification is 98%.

I would like to improve the image quality at all costs. I would really appreciate your help.

Image using setCanvasMultiplier

use_setCanvasMultiplier
use_setCanvasMultiplier588×822 49.1 KB

Image without setCanvasMultiplier

not_use_setCanvasMultiplier
not_use_setCanvasMultiplier584×819 58.8 KB

sample-blurry.pdf (567.8 KB)

6

Hello dev1,

Have you tried setting the canvas multiplier higher?

There is a point at which the document should become blurry as the device’s resolution reaches the minimum legible font size.

What is the resolution of your screen?

Best regards,
Tyler

1 Like
7

The resolution (screen size) is as follows
1920 x 1080

The image also appears blurred at the following resolutions.
3440 x 1440

The image quality was not improved by setting the setCanvasMultiplier value to 1, 2, or 3.

How can I set a higher canvas multiplier other than using the setCanvasMultiplier method? Can you express this in code?

8

@tgordon Sorry to rush you, but I would appreciate an answer. I am really in a bind.

9

Hello dev1,

Apologies for the delay,
I was still unable to reproduce this with the provided file and the resolutions.

When you do setCanvasMultipier, try resetting the zoom by doing, to trigger a rerender:

instance.Core.documentViewer.zoomTo(instance.Core.documentViewer.getZoomLevel())

Let me know if this works for you.

Best regards,
Tyler

1 Like
10

@tgordon

I have tried the following steps and the resolution remains the same.
As usual, zooming in improves the image quality, but zooming out deteriorates it.
Is there any other way?


            instance.Core.setCanvasMultiplier(2)
            instance.Core.documentViewer.zoomTo(
              instance.Core.documentViewer.getZoomLevel()
            )
            instance.loadDocument(path)
11

@tgordon Sorry to rush you, but I am awaiting your response.