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/README.md b/README.md index 97db68d36..f3500ae4d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # pdf.js - + ## Overview 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 ebc0bcb06..5164d0b19 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -25,7 +25,7 @@ - + diff --git a/web/viewer.js b/web/viewer.js index 2114ad3af..b7c654ebf 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; } @@ -389,6 +400,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) { @@ -503,6 +516,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 scale = this.scale; canvas.width = pageWidth * scale; @@ -516,7 +530,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); + this.content.startRendering(ctx, (function pageViewDrawCallback() { + this.updateStats(); + if (this.onAfterDraw) + this.onAfterDraw(); + }).bind(this)); setupLinks(this.content, this.scale); div.setAttribute('data-loaded', true); @@ -560,10 +578,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; @@ -588,7 +605,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; }; };