Skip to content

Commit 06c07ac

Browse files
committed
Fix the PDF rendering quality
Fixes #369 The problem we were hitting was because we were setting the viewport scale to 1 when rendering each of the PDF pages. As I was digging into this, I found this page, which describes exactly what's going on: http://stackoverflow.com/questions/35400722/pdf-image-quality-is-bad-using-pdf-js Basically, this is how it breaks down. We create a canvas element to render the PDF page onto, and it is set to the viewport height and width. Because many (most?) PDFs are rendered at a smaller resolution, what ends up happening is on higher resolution monitors we create a big canvas, but then render an image that isn't scaled to it right. This causes the pixels to get spread out and blurriness ensues. The fix is to set the scaling to "2". We played around with the 3-5 range and it looked good on high resolutions - but as soon as the same image was rendered on a smaller resolution screen things went south quick. 2 seems to be the right setting which straddles the fence between the bad and pretty good.
1 parent eff2bea commit 06c07ac

File tree

1 file changed

+7
-1
lines changed

1 file changed

+7
-1
lines changed

src/scripts/contentCapture/pdfJsDocument.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,13 @@ export class PdfJsDocument implements PdfDocument {
4848
return new Promise<string>((resolve) => {
4949
// In pdf.js, indexes start at 1
5050
this.pdf.getPage(pageIndex + 1).then((page) => {
51-
let viewport = page.getViewport(1 /* scale */);
51+
// Issue #369: When the scale is set to 1, we end up with poor quality images
52+
// on high resolution machines. The best explanation I found for this was in
53+
// this article: http://stackoverflow.com/questions/35400722/pdf-image-quality-is-bad-using-pdf-js
54+
// Note that we played around with setting the scale from 3-5, which looked better on high
55+
// resolution monitors - but did not look good at all at lower resolutions. scale=2 seems
56+
// to be the happy medium.
57+
let viewport = page.getViewport(2 /* scale */);
5258
let canvas = document.createElement("canvas") as HTMLCanvasElement;
5359
let context = canvas.getContext("2d");
5460
canvas.height = viewport.height;

0 commit comments

Comments
 (0)