Skip to content

Commit ae16e8f

Browse files
joneschrisgjoneschrisg
committed
Merge pull request mozilla#136 from notmasteryet/issue-132-part-A
the "hieght" and the 72dpi<->96dpi fixes
2 parents 29d0d8a + 5ece4da commit ae16e8f

File tree

8 files changed

+48
-27
lines changed

8 files changed

+48
-27
lines changed

‎multi_page_viewer.js

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,15 @@ var PDFViewer = {
2929
scale: 1.0,
3030

3131
pageWidth: function(page) {
32-
return page.mediaBox[2] * PDFViewer.scale;
32+
var pdfToCssUnitsCoef = 96.0 / 72.0;
33+
var width = (page.mediaBox[2] - page.mediaBox[0]);
34+
return width * PDFViewer.scale * pdfToCssUnitsCoef;
3335
},
3436

3537
pageHeight: function(page) {
36-
return page.mediaBox[3] * PDFViewer.scale;
38+
var pdfToCssUnitsCoef = 96.0 / 72.0;
39+
var height = (page.mediaBox[3] - page.mediaBox[1]);
40+
return height * PDFViewer.scale * pdfToCssUnitsCoef;
3741
},
3842

3943
lastPagesDrawn: [],
@@ -106,10 +110,11 @@ var PDFViewer = {
106110
canvas.id = 'thumbnail' + num;
107111
canvas.mozOpaque = true;
108112

109-
// Canvas dimensions must be specified in CSS pixels. CSS pixels
110-
// are always 96 dpi. These dimensions are 8.5in x 11in at 96dpi.
111-
canvas.width = 104;
112-
canvas.height = 134;
113+
var pageWidth = PDFViewer.pageWidth(page);
114+
var pageHeight = PDFViewer.pageHeight(page);
115+
var thumbScale = Math.min(104 / pageWidth, 134 / pageHeight);
116+
canvas.width = pageWidth * thumbScale;
117+
canvas.height = pageHeight * thumbScale;
113118
div.appendChild(canvas);
114119

115120
var ctx = canvas.getContext('2d');
@@ -175,8 +180,6 @@ var PDFViewer = {
175180
canvas.id = 'page' + num;
176181
canvas.mozOpaque = true;
177182

178-
// Canvas dimensions must be specified in CSS pixels. CSS pixels
179-
// are always 96 dpi. These dimensions are 8.5in x 11in at 96dpi.
180183
canvas.width = PDFViewer.pageWidth(page);
181184
canvas.height = PDFViewer.pageHeight(page);
182185
div.appendChild(canvas);

‎test/test_slave.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<style type="text/css"></style>
55
<script type="text/javascript" src="/pdf.js"></script>
66
<script type="text/javascript" src="/fonts.js"></script>
7+
<script type="text/javascript" src="/crypto.js"></script>
78
<script type="text/javascript" src="/glyphlist.js"></script>
89
<script type="application/javascript">
910
var appPath, browser, canvas, currentTask, currentTaskIdx, failure, manifest, numPages, pdfDoc, stdout;
@@ -103,11 +104,12 @@
103104
}
104105

105106
try {
107+
var pdfToCssUnitsCoef = 96.0 / 72.0;
106108
// using mediaBox for the canvas size
107-
var wTwips = (currentPage.mediaBox[2] - currentPage.mediaBox[0]);
108-
var hTwips = (currentPage.mediaBox[3] - currentPage.mediaBox[1]);
109-
canvas.width = wTwips * 96.0 / 72.0;
110-
canvas.height = hTwips * 96.0 / 72.0;
109+
var pageWidth = (currentPage.mediaBox[2] - currentPage.mediaBox[0]);
110+
var pageHeight = (currentPage.mediaBox[3] - currentPage.mediaBox[1]);
111+
canvas.width = pageWidth * pdfToCssUnitsCoef;
112+
canvas.height = pageHeight * pdfToCssUnitsCoef;
111113
clear(ctx);
112114
} catch(e) {
113115
failure = 'page setup: '+ e.toString();

‎viewer.css

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,11 @@ span#info {
2424
}
2525

2626
#viewer {
27+
}
28+
29+
#canvas {
2730
margin: auto;
28-
border: 1px solid black;
29-
width: 12.75in;
30-
height: 16.5in;
31+
display: block;
3132
}
3233

3334
#pageNumber {

‎viewer.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,7 @@
2525
</div>
2626

2727
<div id="viewer">
28-
<!-- Canvas dimensions must be specified in CSS pixels. CSS pixels
29-
are always 96 dpi. 816x1056 is 8.5x11in at 96dpi. -->
30-
<canvas id="canvas" width="816" height="1056" defaultwidth="816" defaultheight="1056"></canvas>
28+
<canvas id="canvas"></canvas>
3129
</div>
3230
</body>
3331
</html>

‎viewer.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,12 @@ function displayPage(num) {
6060
var t0 = Date.now();
6161

6262
var page = pdfDocument.getPage(pageNum = num);
63-
canvas.width = parseInt(canvas.getAttribute("defaultwidth")) * pageScale;
64-
canvas.height = parseInt(canvas.getAttribute("defaultheight")) * pageScale;
6563

66-
// scale canvas by 2
67-
canvas.width = 2 * page.mediaBox[2];
68-
canvas.hieght = 2 * page.mediaBox[3];
64+
var pdfToCssUnitsCoef = 96.0 / 72.0;
65+
var pageWidth = (page.mediaBox[2] - page.mediaBox[0]);
66+
var pageHeight = (page.mediaBox[3] - page.mediaBox[1]);
67+
canvas.width = pageScale * pageWidth * pdfToCssUnitsCoef;
68+
canvas.height = pageScale * pageHeight * pdfToCssUnitsCoef;
6969

7070
var t1 = Date.now();
7171
var ctx = canvas.getContext("2d");

‎viewer_worker.html

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,7 @@
3939
</div>
4040

4141
<div id="viewer">
42-
<!-- Canvas dimensions must be specified in CSS pixels. CSS pixels
43-
are always 96 dpi. 816x1056 is 8.5x11in at 96dpi. -->
44-
<!-- We're rendering here at 1.5x scale. -->
45-
<canvas id="canvas" width="1224" height="1584"></canvas>
42+
<canvas id="canvas"></canvas>
4643
</div>
4744
</body>
4845
</html>

‎worker/client.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -306,6 +306,13 @@ function WorkerPDFDoc(canvas) {
306306
document.body.appendChild(div);
307307
},
308308

309+
"setup_page": function(data) {
310+
var size = data.split(",");
311+
var canvas = this.canvas, ctx = this.ctx;
312+
canvas.width = parseInt(size[0]);
313+
canvas.height = parseInt(size[1]);
314+
},
315+
309316
"fonts": function(data) {
310317
this.waitingForFonts = true;
311318
this.fontWorker.ensureFonts(data, function() {

‎worker/pdf.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ importScripts("console.js")
3131
importScripts("canvas.js");
3232
importScripts("../pdf.js");
3333
importScripts("../fonts.js");
34+
importScripts("../crypto.js");
3435
importScripts("../glyphlist.js")
3536

3637
// Use the JpegStreamProxy proxy.
@@ -59,6 +60,18 @@ onmessage = function(event) {
5960
// Let's try to render the first page...
6061
var page = pdfDocument.getPage(parseInt(data));
6162

63+
var pdfToCssUnitsCoef = 96.0 / 72.0;
64+
var pageWidth = (page.mediaBox[2] - page.mediaBox[0]) * pdfToCssUnitsCoef;
65+
var pageHeight = (page.mediaBox[3] - page.mediaBox[1]) * pdfToCssUnitsCoef;
66+
postMessage({
67+
action: "setup_page",
68+
data: pageWidth + "," + pageHeight
69+
});
70+
71+
// Set canvas size.
72+
canvas.width = pageWidth;
73+
canvas.height = pageHeight;
74+
6275
// page.compile will collect all fonts for us, once we have loaded them
6376
// we can trigger the actual page rendering with page.display
6477
var fonts = [];

0 commit comments

Comments
 (0)