Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ensure that rendering of thumbnails work correctly on HiDPI displays (issue 9820)

Browse Source 
*Note that I wasn't able to reproduce the issue in Firefox, but only in Chromium-browsers.*

The bug, and it's feels almost trivial once you've found it, is that we're not passing the `transform` parameter as intended to `PDFPageProxy.render` when drawing thumbnails on HiDPI displays. Instead the canvas context is, for reasons that I don't even pretent to understand, *manually* scaled in `PDFThumbnailView._getPageDrawContext`, which thus doesn't guarantee that the `baseTransform` property on the `CanvasGraphics`-instances becomes correct.

The solution is really simple though, just handle the `transform` the same way in `PDFThumbnailView.draw` as in `PDFPageView.paintOnCanvas` and things should just work.
This commit is contained in:
Jonas Jenwald 2020-11-13 15:14:05 +01:00
parent 59b35600be
commit 2e551acc8d
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/pdf_thumbnail_view.js
View File

@ -229,7 +229,7 @@ class PDFThumbnailView {
/** /**
* @private * @private
*/ */
_getPageDrawContext(noCtxScale = false) { _getPageDrawContext() {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
// Keep the no-thumbnail outline visible, i.e. `data-loaded === false`, // Keep the no-thumbnail outline visible, i.e. `data-loaded === false`,
// until rendering/image conversion is complete, to avoid display issues. // until rendering/image conversion is complete, to avoid display issues.
@ -249,10 +249,11 @@ class PDFThumbnailView {
canvas.style.width = this.canvasWidth + "px"; canvas.style.width = this.canvasWidth + "px";
canvas.style.height = this.canvasHeight + "px"; canvas.style.height = this.canvasHeight + "px";
if (!noCtxScale && outputScale.scaled) { const transform = outputScale.scaled
ctx.scale(outputScale.sx, outputScale.sy); ? [outputScale.sx, 0, 0, outputScale.sy, 0, 0]
} : null;
return ctx;
return [ctx, transform];
} }
/** /**
@ -333,7 +334,7 @@ class PDFThumbnailView {
} }
}; };
const ctx = this._getPageDrawContext(); const [ctx, transform] = this._getPageDrawContext();
const drawViewport = this.viewport.clone({ scale: this.scale }); const drawViewport = this.viewport.clone({ scale: this.scale });
const renderContinueCallback = cont => { const renderContinueCallback = cont => {
if (!this.renderingQueue.isHighestPriority(this)) { if (!this.renderingQueue.isHighestPriority(this)) {
@ -349,6 +350,7 @@ class PDFThumbnailView {
const renderContext = { const renderContext = {
canvasContext: ctx, canvasContext: ctx,
transform,
viewport: drawViewport, viewport: drawViewport,
optionalContentConfigPromise: this._optionalContentConfigPromise, optionalContentConfigPromise: this._optionalContentConfigPromise,
}; };
@ -393,7 +395,7 @@ class PDFThumbnailView {
this.renderingState = RenderingStates.FINISHED; this.renderingState = RenderingStates.FINISHED;
const ctx = this._getPageDrawContext(true); const [ctx] = this._getPageDrawContext();
const canvas = ctx.canvas; const canvas = ctx.canvas;
if (img.width <= 2 * canvas.width) { if (img.width <= 2 * canvas.width) {
ctx.drawImage( ctx.drawImage(