Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
the "hieght" and the 72dpi<->96dpi fixes
This commit is contained in:
Chris Jones 2011-06-30 01:03:14 -07:00
commit ae16e8f62c
8 changed files with 48 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
multi_page_viewer.js
View File

@ -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);

10
test/test_slave.html
View File

@ -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();

7
viewer.css
View File

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

4
viewer.html
View File

@ -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>

10
viewer.js
View File

@ -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");

5
viewer_worker.html
View File

@ -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>

7
worker/client.js
View File

@ -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() {

13
worker/pdf.js
View File

@ -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 = [];