mirror of
https://github.com/mozilla/pdf.js.git
synced 2025-04-29 15:47:57 +02:00
[api-minor] Render high-res partial page views when falling back to CSS zoom (bug 1492303)
When rendering big PDF pages at high zoom levels, we currently fall back to CSS zoom to avoid rendering canvases with too many pixels. This causes zoomed in PDF to look blurry, and the text to be potentially unreadable. This commit adds support for rendering _part_ of a page (called `PDFPageDetailView` in the code), so that we can render portion of a page in a smaller canvas without hiting the maximun canvas size limit. Specifically, we render an area of that page that is slightly larger than the area that is visible on the screen (100% larger in each direction, unless we have to limit it due to the maximum canvas size). As the user scrolls around the page, we re-render a new area centered around what is currently visible.
This commit is contained in:
parent
06257f782e
commit
458b2ee402
14 changed files with 1142 additions and 116 deletions
|
@ -90,7 +90,7 @@ class BasePDFPageView {
|
|||
}
|
||||
}
|
||||
|
||||
_createCanvas(onShow) {
|
||||
_createCanvas(onShow, hideUntilComplete = false) {
|
||||
const { pageColors } = this;
|
||||
const hasHCM = !!(pageColors?.background && pageColors?.foreground);
|
||||
const prevCanvas = this.canvas;
|
||||
|
@ -98,7 +98,7 @@ class BasePDFPageView {
|
|||
// In HCM, a final filter is applied on the canvas which means that
|
||||
// before it's applied we've normal colors. Consequently, to avoid to
|
||||
// have a final flash we just display it once all the drawing is done.
|
||||
const updateOnFirstShow = !prevCanvas && !hasHCM;
|
||||
const updateOnFirstShow = !prevCanvas && !hasHCM && !hideUntilComplete;
|
||||
|
||||
const canvas = (this.canvas = document.createElement("canvas"));
|
||||
|
||||
|
@ -154,39 +154,37 @@ class BasePDFPageView {
|
|||
this.canvas = null;
|
||||
}
|
||||
|
||||
async _drawCanvas(options, prevCanvas, onFinish) {
|
||||
async _drawCanvas(options, onCancel, onFinish) {
|
||||
const renderTask = (this.renderTask = this.pdfPage.render(options));
|
||||
renderTask.onContinue = this.#renderContinueCallback;
|
||||
renderTask.onError = error => {
|
||||
if (error instanceof RenderingCancelledException) {
|
||||
onCancel();
|
||||
this.#renderError = null;
|
||||
}
|
||||
};
|
||||
|
||||
let error = null;
|
||||
try {
|
||||
await renderTask.promise;
|
||||
this.#showCanvas?.(true);
|
||||
this.#finishRenderTask(renderTask, null, onFinish);
|
||||
} catch (error) {
|
||||
} catch (e) {
|
||||
error = e;
|
||||
// When zooming with a `drawingDelay` set, avoid temporarily showing
|
||||
// a black canvas if rendering was cancelled before the `onContinue`-
|
||||
// callback had been invoked at least once.
|
||||
if (!(error instanceof RenderingCancelledException)) {
|
||||
this.#showCanvas?.(true);
|
||||
} else {
|
||||
prevCanvas?.remove();
|
||||
this._resetCanvas();
|
||||
if (error instanceof RenderingCancelledException) {
|
||||
return;
|
||||
}
|
||||
this.#finishRenderTask(renderTask, error, onFinish);
|
||||
}
|
||||
}
|
||||
|
||||
async #finishRenderTask(renderTask, error, onFinish) {
|
||||
// The renderTask may have been replaced by a new one, so only remove
|
||||
// the reference to the renderTask if it matches the one that is
|
||||
// triggering this callback.
|
||||
if (renderTask === this.renderTask) {
|
||||
this.renderTask = null;
|
||||
}
|
||||
|
||||
if (error instanceof RenderingCancelledException) {
|
||||
this.#renderError = null;
|
||||
return;
|
||||
this.#showCanvas?.(true);
|
||||
} finally {
|
||||
// The renderTask may have been replaced by a new one, so only remove
|
||||
// the reference to the renderTask if it matches the one that is
|
||||
// triggering this callback.
|
||||
if (renderTask === this.renderTask) {
|
||||
this.renderTask = null;
|
||||
}
|
||||
}
|
||||
this.#renderError = error;
|
||||
|
||||
|
@ -214,11 +212,12 @@ class BasePDFPageView {
|
|||
});
|
||||
}
|
||||
|
||||
dispatchPageRendered(cssTransform) {
|
||||
dispatchPageRendered(cssTransform, isDetailView) {
|
||||
this.eventBus.dispatch("pagerendered", {
|
||||
source: this,
|
||||
pageNumber: this.id,
|
||||
cssTransform,
|
||||
isDetailView,
|
||||
timestamp: performance.now(),
|
||||
error: this.#renderError,
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue