Improve PDF rendering quality and sharpness

Increased the scale for rendering PDF pages from 0.2 to 0.5 in the
`getViewport` method to enhance resolution and sharpness. Although
CSS scales the canvas down, the higher scale ensures better visual
quality.

Enabled high-quality rendering for the canvas context by setting
`ctx.imageSmoothingEnabled` to `true` and `ctx.imageSmoothingQuality`
to `'high'`, resulting in smoother and sharper PDF content rendering.
This commit is contained in:
2026-06-06 01:17:54 +02:00
parent 64068c9c29
commit 4b5cdbfccd

View File

@@ -255,12 +255,19 @@ window.pdfViewer = {
}
const page = await this.pdfDoc.getPage(pageNum);
const viewport = page.getViewport({ scale: 0.2 });
// Use higher scale for better quality (0.5 instead of 0.2)
// CSS will scale it down but maintain sharpness
const viewport = page.getViewport({ scale: 0.5 });
canvas.height = viewport.height;
canvas.width = viewport.width;
const ctx = canvas.getContext('2d');
// Enable high-quality rendering
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
const renderContext = {
canvasContext: ctx,
viewport: viewport