Support for multi-size page PDFs

multi_page_viewer.js

@@ -26,41 +26,53 @@ var PDFViewer = {
   
   scale: 1.0,
   
-  pageWidth: function() {
-    return 816 * PDFViewer.scale;
+  pageWidth: function(page) {
+    return page.mediaBox[2] * PDFViewer.scale;
   },
   
-  pageHeight: function() {
-    return 1056 * PDFViewer.scale;
+  pageHeight: function(page) {
+    return page.mediaBox[3] * PDFViewer.scale;
   },
   
   lastPagesDrawn: [],
   
   visiblePages: function() {
-    var pageHeight = PDFViewer.pageHeight() + 20; // Add 20 for the margins.      
+    const pageBottomMargin = 20;
     var windowTop = window.pageYOffset;
     var windowBottom = window.pageYOffset + window.innerHeight;
-    var pageStartIndex = Math.floor(windowTop / pageHeight);
-    var pageStopIndex = Math.ceil(windowBottom / pageHeight);
+
+    var pageHeight, page;
+    var i, n = PDFViewer.numberOfPages, currentHeight = 0;
+    for (i = 1; i <= n; i++) {
+      var page = PDFViewer.pdf.getPage(i);
+      pageHeight = PDFViewer.pageHeight(page) + pageBottomMargin;
+      if (currentHeight + pageHeight > windowTop)
+        break;
+      currentHeight += pageHeight;
+    }
     
     var pages = [];  
-    
-    for (var i = pageStartIndex; i <= pageStopIndex; i++) {
-      pages.push(i + 1);
+    for (; i <= n && currentHeight < windowBottom; i++) {
+      var page = PDFViewer.pdf.getPage(i);
+      pageHeight = PDFViewer.pageHeight(page) + pageBottomMargin;
+      currentHeight += pageHeight;
+      pages.push(i);
     }
     
     return pages;
   },
   
   createPage: function(num) {
+    var page = PDFViewer.pdf.getPage(num);
+
     var anchor = document.createElement('a');
     anchor.name = '' + num;
     
     var div = document.createElement('div');
     div.id = 'pageContainer' + num;
     div.className = 'page';
-    div.style.width = PDFViewer.pageWidth() + 'px';
-    div.style.height = PDFViewer.pageHeight() + 'px';
+    div.style.width = PDFViewer.pageWidth(page) + 'px';
+    div.style.height = PDFViewer.pageHeight(page) + 'px';
     
     PDFViewer.element.appendChild(anchor);
     PDFViewer.element.appendChild(div);
@@ -91,8 +103,8 @@ var PDFViewer = {
 
       // Canvas dimensions must be specified in CSS pixels. CSS pixels
       // are always 96 dpi. These dimensions are 8.5in x 11in at 96dpi.
-      canvas.width = PDFViewer.pageWidth();
-      canvas.height = PDFViewer.pageHeight();
+      canvas.width = PDFViewer.pageWidth(page);
+      canvas.height = PDFViewer.pageHeight(page);
       div.appendChild(canvas);
 
       var ctx = canvas.getContext('2d');

test/test_manifest.json

@@ -25,5 +25,10 @@
        "link": true,
        "rounds": 1,
        "type": "load"
+    },
+    {  "id": "sizes",
+       "file": "pdfs/sizes.pdf",
+       "rounds": 1,
+       "type": "eq"
     }
 ]

test/test_slave.html

@@ -25,9 +25,6 @@ function load() {
   manifestFile = params.manifestFile;
 
   canvas = document.createElement("canvas");
-  // 8.5x11in @ 100% ... XXX need something better here
-  canvas.width = 816;
-  canvas.height = 1056;
   canvas.mozOpaque = true;
   stdout = document.getElementById("stdout");
 
@@ -93,7 +90,6 @@ function nextPage() {
   log("    loading page "+ currentTask.pageNum +"... ");
 
   var ctx = canvas.getContext("2d");
-  clear(ctx);
 
   var fonts = [];
   var gfx = null;
@@ -105,6 +101,15 @@ function nextPage() {
     failure = 'compile: '+ e.toString();
   }
 
+  try {
+    // using mediaBox for the canvas size
+    canvas.width = currentPage.mediaBox[2];
+    canvas.height = currentPage.mediaBox[3];
+    clear(ctx);
+  } catch(e) {
+    failure = 'page setup: '+ e.toString();
+  }
+
   var fontLoaderTimer = null;
   function checkFontsLoaded() {
     try {
@@ -193,7 +198,6 @@ function sendTaskResult(snapshot) {
 }
 
 function clear(ctx) {
-  var ctx = canvas.getContext("2d");
   ctx.save();
   ctx.fillStyle = "rgb(255, 255, 255)";
   ctx.fillRect(0, 0, canvas.width, canvas.height);

viewer.js

@@ -60,6 +60,10 @@ function displayPage(num) {
 
     var page = pdfDocument.getPage(pageNum = num);
 
+    // scale canvas by 2
+    canvas.width = 2 * page.mediaBox[2];
+    canvas.hieght = 2 * page.mediaBox[3];
+
     var t1 = Date.now();
     var ctx = canvas.getContext("2d");
     ctx.save();