diff --git a/Makefile b/Makefile index 2cc886091..caeca9b41 100644 --- a/Makefile +++ b/Makefile @@ -33,6 +33,7 @@ PDF_JS_FILES = \ pattern.js \ stream.js \ worker.js \ + ../external/jpgjs/jpg.js \ $(NULL) # make server diff --git a/examples/helloworld/index.html b/examples/helloworld/index.html index a48e3705b..a2485d918 100644 --- a/examples/helloworld/index.html +++ b/examples/helloworld/index.html @@ -22,6 +22,7 @@ + + + + + + + + + + + + + + + + diff --git a/web/viewer.html b/web/viewer.html index a72503eee..e441a9847 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -25,7 +25,7 @@ - + diff --git a/web/viewer.js b/web/viewer.js index f7821659e..196d16af4 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -193,6 +193,13 @@ var PDFView = { }, load: function pdfViewLoad(data, scale) { + function bindOnAfterDraw(pageView, thumbnailView) { + // when page is painted, using the image as thumbnail base + pageView.onAfterDraw = function pdfViewLoadOnAfterDraw() { + thumbnailView.setImage(pageView.canvas); + }; + } + var loadingIndicator = document.getElementById('loading'); loadingIndicator.setAttribute('hidden', 'true'); @@ -219,10 +226,14 @@ var PDFView = { var thumbnails = this.thumbnails = []; for (var i = 1; i <= pagesCount; i++) { var page = pdf.getPage(i); - pages.push(new PageView(container, page, i, page.width, page.height, - page.stats, this.navigateTo.bind(this))); - thumbnails.push(new ThumbnailView(sidebar, page, i, - page.width / page.height)); + var pageView = new PageView(container, page, i, page.width, page.height, + page.stats, this.navigateTo.bind(this)); + var thumbnailView = new ThumbnailView(sidebar, page, i, + page.width / page.height); + bindOnAfterDraw(pageView, thumbnailView); + + pages.push(pageView); + thumbnails.push(thumbnailView); var pageRef = page.ref; pagesRefMap[pageRef.num + ' ' + pageRef.gen + ' R'] = i; } @@ -360,6 +371,8 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight, while (div.hasChildNodes()) div.removeChild(div.lastChild); div.removeAttribute('data-loaded'); + + delete this.canvas; }; function setupLinks(content, scale) { @@ -474,6 +487,7 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight, canvas.id = 'page' + this.id; canvas.mozOpaque = true; div.appendChild(canvas); + this.canvas = canvas; var textLayer = document.createElement('div'); textLayer.className = 'textLayer'; @@ -491,7 +505,11 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight, ctx.translate(-this.x * scale, -this.y * scale); stats.begin = Date.now(); - this.content.startRendering(ctx, this.updateStats, textLayer); + this.content.startRendering(ctx, (function pageViewDrawCallback() { + this.updateStats(); + if (this.onAfterDraw) + this.onAfterDraw(); + }).bind(this), textLayer); setupLinks(this.content, this.scale); div.setAttribute('data-loaded', true); @@ -522,10 +540,9 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) { anchor.appendChild(div); container.appendChild(anchor); - this.draw = function thumbnailViewDraw() { - if (div.hasChildNodes()) - return; + this.hasImage = false; + function getPageDrawContext() { var canvas = document.createElement('canvas'); canvas.id = 'thumbnail' + id; canvas.mozOpaque = true; @@ -553,7 +570,28 @@ var ThumbnailView = function thumbnailView(container, page, id, pageRatio) { div.style.height = (view.height * scaleY) + 'px'; div.style.lineHeight = (view.height * scaleY) + 'px'; + return ctx; + } + + this.draw = function thumbnailViewDraw() { + if (this.hasImage) + return; + + var ctx = getPageDrawContext(); page.startRendering(ctx, function thumbnailViewDrawStartRendering() {}); + + this.hasImage = true; + }; + + this.setImage = function thumbnailViewSetImage(img) { + if (this.hasImage) + return; + + var ctx = getPageDrawContext(); + ctx.drawImage(img, 0, 0, img.width, img.height, + 0, 0, ctx.canvas.width, ctx.canvas.height); + + this.hasImage = true; }; }; @@ -691,6 +729,10 @@ window.addEventListener('transitionend', function webViewerTransitionend(evt) { var container = document.getElementById('sidebarView'); container._interval = window.setInterval(function interval() { + // skipping the thumbnails with set images + while (pageIndex < pagesCount && PDFView.thumbnails[pageIndex].hasImage) + pageIndex++; + if (pageIndex >= pagesCount) { window.clearInterval(container._interval); return;