From 5ece4da552533a28827f9a0b9088e14b11f1866c Mon Sep 17 00:00:00 2001
From: notmasteryet <async.processingjs@yahoo.com>
Date: Wed, 29 Jun 2011 22:43:59 -0500
Subject: [PATCH] the "hieght" and the 72dpi<->96dpi fixes

---
 multi_page_viewer.js | 19 +++++++++++--------
 test/test_slave.html | 10 ++++++----
 viewer.css           |  7 ++++---
 viewer.html          |  4 +---
 viewer.js            | 10 +++++-----
 viewer_worker.html   |  5 +----
 worker/client.js     |  7 +++++++
 worker/pdf.js        | 13 +++++++++++++
 8 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/multi_page_viewer.js b/multi_page_viewer.js
index 87e2c8f14..7bd59873f 100644
--- a/multi_page_viewer.js
+++ b/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);
diff --git a/test/test_slave.html b/test/test_slave.html
index d70e362af..0a330e703 100644
--- a/test/test_slave.html
+++ b/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();
diff --git a/viewer.css b/viewer.css
index 857eed101..9987492dc 100644
--- a/viewer.css
+++ b/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 {
diff --git a/viewer.html b/viewer.html
index 24213f7d6..c600547f0 100644
--- a/viewer.html
+++ b/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>
diff --git a/viewer.js b/viewer.js
index 5db2effda..38b0537b1 100644
--- a/viewer.js
+++ b/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");
diff --git a/viewer_worker.html b/viewer_worker.html
index fe3319d62..89fb8a087 100644
--- a/viewer_worker.html
+++ b/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>
diff --git a/worker/client.js b/worker/client.js
index 960e97496..73fb12f09 100644
--- a/worker/client.js
+++ b/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() {
diff --git a/worker/pdf.js b/worker/pdf.js
index d9a7b5319..a1f18f694 100644
--- a/worker/pdf.js
+++ b/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 = [];