Pdf document with image displayed in low quality

[SergeyKaplin]

Attach (recommended) or Link to PDF file: Test.pdf

Configuration:

• Web browser and its version: Chrome, Firefox
• Operating system and its version: Windows 10, 11
• PDF.js version: v2.14.305, v3.5.141
• Is a browser extension: No

Steps to reproduce the problem:

1. Open attached pdf file in Firefox or Chrome
2. Open same pdf file in https://mozilla.github.io/pdf.js/web/viewer.html

What is the expected behavior? logo image Firefox rendering

What went wrong? (add screenshot) In https://mozilla.github.io/pdf.js/web/viewer.html logo image is rendered in low quality compared to Firefox rendering

The same problem occurs when I use "pdfjs-dist" in my application code

    var scale = 1;
    var viewport = page.getViewport({scale: scale});
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    var renderTask = page.render(renderContext);
    renderTask.promise.then(function () {
    ...
    }); 

I tried to increase the scale to 5 and set the canvas style width, height = 100%, and put canvas into wrapper

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

This slightly increased the quality of the logo, but it is still worse than when file opened in Firefox.

[Snuffleupagus]

What went wrong? (add screenshot) In https://mozilla.github.io/pdf.js/web/viewer.html logo image is rendered in low quality compared to Firefox rendering

Does it work also better if you open your PDF document with https://mozilla.github.io/pdf.js/web/viewer.html in Mozilla Firefox instead? If so, this is likely a bug in Google Chrome rather than the PDF.js library; please keep in mind that Firefox is the primary development target here.

[SergeyKaplin]

What went wrong? (add screenshot) In https://mozilla.github.io/pdf.js/web/viewer.html logo image is rendered in low quality compared to Firefox rendering

Does it work also better if you open your PDF document with https://mozilla.github.io/pdf.js/web/viewer.html in Mozilla Firefox instead? If so, this is likely a bug in Google Chrome rather than the PDF.js library; please keep in mind that Firefox is the primary development target here.

You are right when I opened PDF document with https://mozilla.github.io/pdf.js/web/viewer.html in Mozilla Firefox everything looks good, probably this is the Google Chrome issues I'm not sure.

But I also use the 'pdf-dist' library in my app in both browsers (Google Chrome, Mozilla Firefox). I tried different versions of the library and noticed that this problem appears starting from version 2.11.338.

I investigated the changes that were made in version 2.11.338. Perhaps the change https://github.com/mozilla/pdf.js/commit/f38fb42b42b7ba9e6f421fbd88a337a371d81ccd in which function "getImageSmoothingEnabled" (..\src\display\canvas.js) was added, led to this problem.

I debugged the 'pdfjs-dist' code and found that for my pdf image, the value 'interpolate' = false, so then the value 'fillCtx.imageSmoothingEnabled' is set to false. If I set the value 'fillCtx.imageSmoothingEnabled' to true then my image in pdf document looks good.

Maybe you can add a global option like force image smoothing?

[Snuffleupagus]

Maybe you can add a global option like force image smoothing?

Sorry, but we simply can't add options for everything that users may want. Please keep in mind that every new option adds code/maintenance/support overhead, since having a bunch of mostly unused and completely untested options often causes problems later on.[1]

Given that it works in Firefox, which is the primary development target, the recommendation would be to file a (canvas-related) bug against Google Chrome and/or add the needed option in your own fork of the PDF.js library.

---

[1] Please note that over the last couple of years we've actually tried to remove rarely used functionality/options, in order to simplify maintenance.

[Aditi-1400]

Hey! @Snuffleupagus , I and @nicolo-ribaudo did some research around this issue, and we think it can be resolved if PDF.js would "always" smoothen the image while downscaling, maybe by reversing the if, else-if here.

This change doesn't change the current behaviour of pdf.js in FireFox, since firefox always smoothens the images when downscaling. The isDownScaling check in Firefox was added in https://bugzilla.mozilla.org/show_bug.cgi?id=1360415 (for pdf.js) following an HTML change that explicitly decided to allow engines to always do interpolation for downscaling.

The chrome's internal PDF viewer (along with other readers like Adobe acrobat, macOS built-in, edge built-in), ignores the interpolate property of the image and always smoothens it while downscaling. But since there's no downscaling check in chrome itself, it causes the pdf.js viewer to not smoothen the images, resulting in the blurry PDFs.

Here's the screenshots from different viewers for the same PDF:

PDF.js viewer in chrome:

Chrome Built-in viewer:

MacOS built-in viewer:

Safari built-in viewer: