2011-05-05 09:32:59 +09:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Simple pdf.js page viewer</title>
|
2011-05-06 14:42:43 +09:00
|
|
|
<script type="text/javascript"
|
2011-05-05 09:32:59 +09:00
|
|
|
src="pdf.js"></script>
|
|
|
|
|
<style type"text/css">
|
2011-05-06 13:46:54 +09:00
|
|
|
body {
|
|
|
|
|
margin: 6px;
|
|
|
|
|
padding: 0px;
|
|
|
|
|
background-color: #c0bdb7;
|
|
|
|
|
}
|
2011-05-05 09:32:59 +09:00
|
|
|
#viewer {
|
2011-05-06 13:46:54 +09:00
|
|
|
margin: auto;
|
|
|
|
|
border: 1px solid black;
|
2011-05-05 09:32:59 +09:00
|
|
|
width: 8.5in;
|
|
|
|
|
height: 11in;
|
2011-05-06 13:46:54 +09:00
|
|
|
}
|
|
|
|
|
#pageNumber {
|
|
|
|
|
text-align: right;
|
2011-05-05 09:32:59 +09:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
2011-05-06 14:42:43 +09:00
|
|
|
<script type="text/javascript">
|
2011-05-05 10:08:52 +09:00
|
|
|
var canvas, numPages, pageDisplay, pageNum;
|
2011-05-05 09:32:59 +09:00
|
|
|
function load() {
|
|
|
|
|
canvas = document.getElementById("canvas");
|
2011-05-05 10:08:52 +09:00
|
|
|
pageDisplay = document.getElementById("pageNumber");
|
|
|
|
|
numPages = tests.length;
|
|
|
|
|
displayPage(pageNum = 0);
|
2011-05-05 09:32:59 +09:00
|
|
|
}
|
|
|
|
|
|
2011-05-05 10:08:52 +09:00
|
|
|
function displayPage(number) {
|
2011-05-06 02:28:37 +09:00
|
|
|
var page = tests[number];
|
2011-05-05 10:08:52 +09:00
|
|
|
pageDisplay.value = number;
|
2011-05-05 09:32:59 +09:00
|
|
|
|
2011-05-05 10:08:52 +09:00
|
|
|
var ctx = canvas.getContext("2d");
|
2011-05-06 13:46:54 +09:00
|
|
|
ctx.save();
|
|
|
|
|
ctx.fillStyle = "rgb(255, 255, 255)";
|
|
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
|
ctx.restore();
|
|
|
|
|
|
2011-05-06 12:20:07 +09:00
|
|
|
var gfx = new CanvasGraphics(ctx);
|
2011-05-06 02:28:37 +09:00
|
|
|
var interp = new Interpreter(null, page.res, null, gfx);
|
2011-05-06 13:46:54 +09:00
|
|
|
interp.interpretHelper(page.mediaBox, new MockParser(page.objs));
|
2011-05-05 10:08:52 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function nextPage() {
|
|
|
|
|
pageNum = (pageNum + 1) % numPages;
|
|
|
|
|
displayPage(pageNum);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function prevPage() {
|
|
|
|
|
pageNum = (pageNum - 1 + numPages) % numPages;
|
|
|
|
|
displayPage(pageNum);
|
2011-05-05 09:32:59 +09:00
|
|
|
}
|
2011-05-05 11:39:07 +09:00
|
|
|
|
|
|
|
|
function profile() {
|
|
|
|
|
const NUM_TRIALS = 10000;
|
|
|
|
|
var start = Date.now();
|
|
|
|
|
for (var i = 0; i < NUM_TRIALS; ++i)
|
|
|
|
|
displayPage(pageNum);
|
|
|
|
|
var end = Date.now();
|
|
|
|
|
var elapsed = (end - start);
|
|
|
|
|
|
|
|
|
|
alert("Drawing current page "+ NUM_TRIALS +" times took "+
|
|
|
|
|
(elapsed / 1000.0) +" seconds, "+
|
|
|
|
|
"~"+ (elapsed / NUM_TRIALS) +" ms/draw (totally unscientific)");
|
|
|
|
|
}
|
2011-05-05 09:32:59 +09:00
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body onload="load();">
|
|
|
|
|
<div>
|
2011-05-05 10:08:52 +09:00
|
|
|
<button onclick="prevPage();">Previous</button>
|
|
|
|
|
<button onclick="nextPage();">Next</button>
|
2011-05-06 13:46:54 +09:00
|
|
|
<input type="text" id="pageNumber" value="0" size="5"></input>
|
2011-05-05 11:39:07 +09:00
|
|
|
<button onclick="profile();">Profile</button>
|
2011-05-05 09:32:59 +09:00
|
|
|
<div id="viewer">
|
|
|
|
|
<!-- Canvas dimensions must be specified in CSS pixels. CSS pixels
|
|
|
|
|
-- are always 96 dpi. These dimensions are 8.5x11in at 96dpi. -->
|
|
|
|
|
<canvas id="canvas" width="816" height="1056"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
