From 80461420b017ee6e4f9658379e3bec5ccd1f777e Mon Sep 17 00:00:00 2001 From: Martin Dullweber Date: Wed, 9 Oct 2024 20:09:46 +0200 Subject: [PATCH 1/2] fix: make determination of pdf rendering scale dpi aware --- src/plugins/pdfPlayer/plugin.js | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/plugins/pdfPlayer/plugin.js b/src/plugins/pdfPlayer/plugin.js index 7b7e3fa4b8f..7767e345293 100644 --- a/src/plugins/pdfPlayer/plugin.js +++ b/src/plugins/pdfPlayer/plugin.js @@ -290,22 +290,16 @@ export class PdfPlayer { } renderPage(canvas, number) { + const devicePixelRatio = window.devicePixelRatio || 1; this.book.getPage(number).then(page => { - const width = dom.getWindowSize().innerWidth; - const height = dom.getWindowSize().innerHeight; - const scale = Math.ceil(window.devicePixelRatio || 1); + const original = page.getViewport({ scale: 1 }); + const scale = Math.max((window.screen.height / original.height),(window.screen.width / original.width)) * devicePixelRatio; const viewport = page.getViewport({ scale }); - const context = canvas.getContext('2d'); + canvas.width = viewport.width; canvas.height = viewport.height; - if (width < height) { - canvas.style.width = '100%'; - canvas.style.height = 'auto'; - } else { - canvas.style.height = '100%'; - canvas.style.width = 'auto'; - } + const context = canvas.getContext('2d'); const renderContext = { canvasContext: context, From d2199d958a5c3dc1ff11c16c899293de76995de8 Mon Sep 17 00:00:00 2001 From: Martin Date: Wed, 9 Oct 2024 20:23:16 +0200 Subject: [PATCH 2/2] style: fix missing space to adhere to ESlint guidelines Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- src/plugins/pdfPlayer/plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/pdfPlayer/plugin.js b/src/plugins/pdfPlayer/plugin.js index 7767e345293..de30a73bfd8 100644 --- a/src/plugins/pdfPlayer/plugin.js +++ b/src/plugins/pdfPlayer/plugin.js @@ -293,7 +293,7 @@ export class PdfPlayer { const devicePixelRatio = window.devicePixelRatio || 1; this.book.getPage(number).then(page => { const original = page.getViewport({ scale: 1 }); - const scale = Math.max((window.screen.height / original.height),(window.screen.width / original.width)) * devicePixelRatio; + const scale = Math.max((window.screen.height / original.height), (window.screen.width / original.width)) * devicePixelRatio; const viewport = page.getViewport({ scale }); canvas.width = viewport.width;