Which product are you using?
PDF.js Express Viewer
PDF.js Express Version
8.7.4
Detailed description of issue
When I press the zoom out button and reduce the magnification to less than 100%, the text in the PDF appears blurry, is there a solution?
Expected behaviour
Text should be displayed without blurring even when the magnification is reduced to 100% or less.
Does your issue happen with every document, or just one?
Only some documents
Link to document
Code snippet
Hi there,
Thanks for reaching out to pdf.js express forums,
Are you able to reproduce the issue on the demo:
If so, could you please share a link or attach the PDF that can reproduce the issue?
Best regards,
Kevin Kim
Sorry, I can’t attach a PDF due to confidential information. Also, this only happens to certain customers of my company. In other words, I can’t reproduce the bug because it’s too difficult to reproduce.
I found a method called setCanvasMultiplier in Core, so what do you think about solving the problem by using that method to increase the resolution when the zoom out button is pressed? Is this the best approach?
Perhaps this bug is caused by a loss of resolution due to the user’s environment. So it would be better if the resolution could be increased.
I have attached an image. When displayed on a larger display, the text becomes more broken.
It seems that the larger the window size, the rougher the PDF display will be.
Hi there,
Thank you for your response,
Using setCanvasMultiplier may improve the rendering of the text, however it is used for rendering pages with document.loadCanvasAsync.
https://pdfjs.express/api/Core.html#.setCanvasMultiplier__anchor
You can also try using recalculateLayout upon zooming out to re-render the pages:
https://pdfjs.express/api/Core.DocumentViewer.html#recalculateLayout__anchor
Best regards,
Kevin Kim
As a result, I was able to solve the problem by using setCanvasMultiplier.
When the browser’s devicePixelRatio is set to 1, the PDF display is rough; trying recalculateLayout had no effect.
Question1
But there still seems to be some poor quality PDFs.
I found an article on the web that uses pdf.js with the following code to improve image quality, can something similar be done with pdf.js express? The website referenced and code are below.
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
https://itecnote.com/tecnote/how-to-improve-display-quality-in-pdf-js/
Question2
I’ve displayed the PDFs I have on the demo site, but I’d like to improve the image quality. Are the PDFs displayed on the demo site rendered in the highest quality possible? If so, I can give up on the idea of not being able to increase the image quality any further with this library. I’ve also attached the PDFs I have.
sample-blurry.pdf (567.8 KB)
Hi there,
It looks like that code will scale the canvas dimensions to the viewport dimensions. This may improve quality but this is not something that we have tested.
Regarding the provided PDF, I zoomed out to 80% and the text appears legible:
Chrome for reference:
Our main product Apryse WebViewer for reference:
Best regards,
Kevin Kim
