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

Merge pull request #7029 from Snuffleupagus/PDFThumnailView-refactor-canvas-to-image

Browse Source 
[PDFThumbnailView] Re-factor the `canvas` to `image` conversion such that we always render to a `canvas`, and then replace it with an `image` once rendering is done
This commit is contained in:
Yury Delendik 2016-03-07 14:00:39 -06:00
commit 4065a21f8c
2 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
web/pdf_thumbnail_view.js
View File

@ -26,6 +26,9 @@ var THUMBNAIL_CANVAS_BORDER_WIDTH = 1; // px
* @property {PageViewport} defaultViewport - The page viewport.
* @property {IPDFLinkService} linkService - The navigation/linking service.
* @property {PDFRenderingQueue} renderingQueue - The rendering queue object.
* @property {boolean} disableCanvasToImageConversion - (optional) Don't convert
* the canvas thumbnails to images. This prevents `toDataURL` calls,
* but increases the overall memory usage. The default value is false.
*/
/**
@ -43,7 +46,7 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
tempCanvas.height = height;
// Since this is a temporary canvas, we need to fill the canvas with a white
// background ourselves. |_getPageDrawContext| uses CSS rules for this.
// background ourselves. `_getPageDrawContext` uses CSS rules for this.
//#if MOZCENTRAL || FIREFOX || GENERIC
tempCanvas.mozOpaque = true;
//#endif
@ -65,6 +68,8 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
var defaultViewport = options.defaultViewport;
var linkService = options.linkService;
var renderingQueue = options.renderingQueue;
var disableCanvasToImageConversion =
options.disableCanvasToImageConversion || false;
this.id = id;
this.renderingId = 'thumbnail' + id;
@ -79,6 +84,7 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
this.resume = null;
this.renderingState = RenderingStates.INITIAL;
this.disableCanvasToImageConversion = disableCanvasToImageConversion;
this.pageWidth = this.viewport.width;
this.pageHeight = this.viewport.height;
@ -183,6 +189,8 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
_getPageDrawContext:
function PDFThumbnailView_getPageDrawContext(noCtxScale) {
var canvas = document.createElement('canvas');
// Keep the no-thumbnail outline visible, i.e. `data-loaded === false`,
// until rendering/image conversion is complete, to avoid display issues.
this.canvas = canvas;
//#if MOZCENTRAL || FIREFOX || GENERIC
@ -199,18 +207,6 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
if (!noCtxScale && outputScale.scaled) {
ctx.scale(outputScale.sx, outputScale.sy);
}
var image = document.createElement('img');
this.image = image;
image.id = this.renderingId;
image.className = 'thumbnailImage';
image.setAttribute('aria-label', mozL10n.get('thumb_page_canvas',
{ page: this.id }, 'Thumbnail of Page {{page}}'));
image.style.width = canvas.style.width;
image.style.height = canvas.style.height;
return ctx;
},
@ -221,10 +217,36 @@ var PDFThumbnailView = (function PDFThumbnailViewClosure() {
if (!this.canvas) {
return;
}
this.image.src = this.canvas.toDataURL();
if (this.renderingState !== RenderingStates.FINISHED) {
return;
}
var id = this.renderingId;
var className = 'thumbnailImage';
var ariaLabel = mozL10n.get('thumb_page_canvas', { page: this.id },
'Thumbnail of Page {{page}}');
if (this.disableCanvasToImageConversion) {
this.canvas.id = id;
this.canvas.className = className;
this.canvas.setAttribute('aria-label', ariaLabel);
this.div.setAttribute('data-loaded', true);
this.ring.appendChild(this.canvas);
return;
}
var image = document.createElement('img');
image.id = id;
image.className = className;
image.setAttribute('aria-label', ariaLabel);
image.style.width = this.canvasWidth + 'px';
image.style.height = this.canvasHeight + 'px';
image.src = this.canvas.toDataURL();
this.image = image;
this.div.setAttribute('data-loaded', true);
this.ring.appendChild(this.image);
this.ring.appendChild(image);
// Zeroing the width and height causes Firefox to release graphics
// resources immediately, which can greatly reduce memory consumption.

3
web/pdf_thumbnail_viewer.js
View File

@ -147,7 +147,8 @@ var PDFThumbnailViewer = (function PDFThumbnailViewerClosure() {
id: pageNum,
defaultViewport: viewport.clone(),
linkService: this.linkService,
renderingQueue: this.renderingQueue
renderingQueue: this.renderingQueue,
disableCanvasToImageConversion: false,
});
this.thumbnails.push(thumbnail);
}