Merge pull request #136 from notmasteryet/issue-132-part-A

the "hieght" and the 72dpi<->96dpi fixes

multi_page_viewer.js

@@ -29,11 +29,15 @@ var PDFViewer = {
   scale: 1.0,
   
   pageWidth: function(page) {
-    return page.mediaBox[2] * PDFViewer.scale;
+    var pdfToCssUnitsCoef = 96.0 / 72.0;
+    var width = (page.mediaBox[2] - page.mediaBox[0]);
+    return width * PDFViewer.scale * pdfToCssUnitsCoef;
   },
   
   pageHeight: function(page) {
-    return page.mediaBox[3] * PDFViewer.scale;
+    var pdfToCssUnitsCoef = 96.0 / 72.0;
+    var height = (page.mediaBox[3] - page.mediaBox[1]);
+    return height * PDFViewer.scale * pdfToCssUnitsCoef;
   },
   
   lastPagesDrawn: [],
@@ -106,10 +110,11 @@ var PDFViewer = {
       canvas.id = 'thumbnail' + num;
       canvas.mozOpaque = true;
 
-      // 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 = 104;
-      canvas.height = 134;
+      var pageWidth = PDFViewer.pageWidth(page);
+      var pageHeight = PDFViewer.pageHeight(page);
+      var thumbScale = Math.min(104 / pageWidth, 134 / pageHeight);
+      canvas.width = pageWidth * thumbScale;
+      canvas.height = pageHeight * thumbScale;
       div.appendChild(canvas);
 
       var ctx = canvas.getContext('2d');
@@ -175,8 +180,6 @@ var PDFViewer = {
       canvas.id = 'page' + num;
       canvas.mozOpaque = true;
 
-      // 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(page);
       canvas.height = PDFViewer.pageHeight(page);
       div.appendChild(canvas);

test/test_slave.html

@@ -4,6 +4,7 @@
   <style type="text/css"></style>
   <script type="text/javascript" src="/pdf.js"></script>
   <script type="text/javascript" src="/fonts.js"></script>
+  <script type="text/javascript" src="/crypto.js"></script>
   <script type="text/javascript" src="/glyphlist.js"></script>
   <script type="application/javascript">
 var appPath, browser, canvas, currentTask, currentTaskIdx, failure, manifest, numPages, pdfDoc, stdout;
@@ -103,11 +104,12 @@ function nextPage() {
   }
 
   try {
+    var pdfToCssUnitsCoef = 96.0 / 72.0;
     // using mediaBox for the canvas size
-    var wTwips = (currentPage.mediaBox[2] - currentPage.mediaBox[0]);
-    var hTwips = (currentPage.mediaBox[3] - currentPage.mediaBox[1]);
-    canvas.width = wTwips * 96.0 / 72.0;
-    canvas.height = hTwips * 96.0 / 72.0;
+    var pageWidth = (currentPage.mediaBox[2] - currentPage.mediaBox[0]);
+    var pageHeight = (currentPage.mediaBox[3] - currentPage.mediaBox[1]);
+    canvas.width = pageWidth * pdfToCssUnitsCoef;
+    canvas.height = pageHeight * pdfToCssUnitsCoef;
     clear(ctx);
   } catch(e) {
     failure = 'page setup: '+ e.toString();

viewer.css

@@ -24,10 +24,11 @@ span#info {
 }
 
 #viewer {
+}
+
+#canvas {
     margin: auto;
-    border: 1px solid black;
-    width: 12.75in;
-    height: 16.5in;
+    display: block;
 }
 
 #pageNumber {

viewer.html

@@ -25,9 +25,7 @@
     </div>
 
     <div id="viewer">
-      <!-- Canvas dimensions must be specified in CSS pixels.  CSS pixels
-           are always 96 dpi.  816x1056 is 8.5x11in at 96dpi. -->
-      <canvas id="canvas" width="816" height="1056" defaultwidth="816" defaultheight="1056"></canvas>
+      <canvas id="canvas"></canvas>
     </div>
   </body>
 </html>

viewer.js

@@ -60,12 +60,12 @@ function displayPage(num) {
     var t0 = Date.now();
 
     var page = pdfDocument.getPage(pageNum = num);
-    canvas.width = parseInt(canvas.getAttribute("defaultwidth")) * pageScale;
-    canvas.height = parseInt(canvas.getAttribute("defaultheight")) * pageScale;
 
-    // scale canvas by 2
-    canvas.width = 2 * page.mediaBox[2];
-    canvas.hieght = 2 * page.mediaBox[3];
+    var pdfToCssUnitsCoef = 96.0 / 72.0;
+    var pageWidth = (page.mediaBox[2] - page.mediaBox[0]);
+    var pageHeight = (page.mediaBox[3] - page.mediaBox[1]);
+    canvas.width = pageScale * pageWidth * pdfToCssUnitsCoef;
+    canvas.height = pageScale * pageHeight * pdfToCssUnitsCoef;
 
     var t1 = Date.now();
     var ctx = canvas.getContext("2d");

viewer_worker.html

@@ -39,10 +39,7 @@ window.onload = function() {
     </div>
 
     <div id="viewer">
-      <!-- Canvas dimensions must be specified in CSS pixels.  CSS pixels
-           are always 96 dpi.  816x1056 is 8.5x11in at 96dpi. -->
-      <!-- We're rendering here at 1.5x scale. -->
-      <canvas id="canvas" width="1224" height="1584"></canvas>
+      <canvas id="canvas"></canvas>
     </div>
   </body>
 </html>

worker/client.js

@@ -306,6 +306,13 @@ function WorkerPDFDoc(canvas) {
       document.body.appendChild(div);
     },
     
+    "setup_page": function(data) {
+      var size = data.split(",");
+      var canvas = this.canvas, ctx = this.ctx;
+      canvas.width = parseInt(size[0]);
+      canvas.height = parseInt(size[1]);
+    },
+
     "fonts": function(data) {
       this.waitingForFonts = true;
       this.fontWorker.ensureFonts(data, function() {

worker/pdf.js

@@ -31,6 +31,7 @@ importScripts("console.js")
 importScripts("canvas.js");
 importScripts("../pdf.js");
 importScripts("../fonts.js");
+importScripts("../crypto.js");
 importScripts("../glyphlist.js")
 
 // Use the JpegStreamProxy proxy.
@@ -59,6 +60,18 @@ onmessage = function(event) {
     // Let's try to render the first page...
     var page = pdfDocument.getPage(parseInt(data));
 
+    var pdfToCssUnitsCoef = 96.0 / 72.0;
+    var pageWidth = (page.mediaBox[2] - page.mediaBox[0]) * pdfToCssUnitsCoef;
+    var pageHeight = (page.mediaBox[3] - page.mediaBox[1]) * pdfToCssUnitsCoef;
+    postMessage({
+      action: "setup_page",
+      data: pageWidth + "," + pageHeight
+    });
+
+    // Set canvas size.
+    canvas.width = pageWidth;
+    canvas.height = pageHeight;
+
     // page.compile will collect all fonts for us, once we have loaded them
     // we can trigger the actual page rendering with page.display
     var fonts = [];