mrwnslz/diora-web
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Fix PDF rendering blur on high-DPI/mobile screens
All checks were successful
Build and push Docker image / build (push) Successful in 13s
Details
Test / test (push) Successful in 14s
Details

Browse source 
Scale canvas by devicePixelRatio and constrain CSS size to logical
pixels so PDF pages render crisp on Retina and mobile displays.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
marwin 2026-04-01 15:48:44 +02:00
parent 1af07c7952
commit 2448586050
1 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
static/js/app.js
View file

@ -2937,15 +2937,20 @@ async function renderPdf(arrayBuffer, contentEl, scaleOverride) {
const inner = document.createElement('div');
inner.className = 'pdf-page-inner';
const dpr = window.devicePixelRatio || 1;
const canvas = document.createElement('canvas');
canvas.className = 'pdf-page';
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.width = Math.round(viewport.width * dpr);
canvas.height = Math.round(viewport.height * dpr);
canvas.style.width = viewport.width + 'px';
canvas.style.height = viewport.height + 'px';
inner.appendChild(canvas);
wrapper.appendChild(inner);
pdfVp.appendChild(wrapper);
await page.render({canvasContext: canvas.getContext('2d'), viewport}).promise;
const ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr);
await page.render({canvasContext: ctx, viewport}).promise;
// Text layer disabled — re-enable once overlay rendering is resolved
}