1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
<html>
<head>
<title>
Emscripten: PDF Demo
</title>
<script type="text/javascript">
arguments = [];
NO_RUN = 1;
</script>
<script src="poppler.yui.js"></script>
<script src="paper.pdf.js"></script>
<script type="text/javascript">
/*
Changes to poppler.js from test runner:
* remove last 3 lines, of prepare-run-print
Fixes after closure compiler:
* replace TOTAL_STACK with 1024*1024
*/
// Wrapper around Poppler
function pdf_to_image(data) {
_STDIO.prepare('input.pdf', data);
run(['-scale-to', '800', '-f', '1', '-l', '1', 'input.pdf', 'filename']);
var ppm = _STDIO.streams[_STDIO.filenames['*s-0*d.']].data;
// Convert ppm
var image = {};
var str = intArrayToString(ppm.slice(100));
var m = /^P6\n(\d+) (\d+)\n255\n.*/.exec(intArrayToString(ppm));
if (!m) {
alert('Output does not seem valid: ' + ppm.slice(0,100));
throw 'fail';
}
image.width = m[1];
image.height = m[2];
var dataIndex = -1;
for (var i = 0; i < 3; i++) {
dataIndex = ppm.indexOf(10, dataIndex+1);
}
image.data = ppm.slice(dataIndex+1); // not terribly memory efficient
return image;
}
// print function which the runtime will call. We figure out the image dimensions from there
function print(text) {
document.getElementById('output').innerHTML += text + '<br>';
}
function render(url) {
// Demo image by default
var data = DEMO_FILE;
// If given a URL, fetch it
if (url && url[0] != '(') {
try {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, false);
xhr.send(null);
var buffer = xhr.mozResponseArrayBuffer;
if (buffer) data = new Uint8Array(buffer);
} catch(e) {
alert('Could not load URL: ' + e);
return;
}
}
document.getElementById('output').innerHTML = '';
var image = pdf_to_image(data);
if (image.data.length != image.height*image.width*3) {
alert('Image sizes are not valid: ' + [image.data.length, image.height, image.width*3]);
throw 'fail';
}
var canvas = document.getElementById('canvas');
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext('2d');
var canvasImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (var y = 0; y < canvas.height; y++) {
for (var x = 0; x < canvas.width; x++) {
var base = (y*canvas.width + x)*4;
var base2 = (y*canvas.width + x)*3;
canvasImage.data[base + 0] = image.data[base2 + 0];
canvasImage.data[base + 1] = image.data[base2 + 1];
canvasImage.data[base + 2] = image.data[base2 + 2];
canvasImage.data[base + 3] = 255;
}
}
ctx.putImageData(canvasImage, 0, 0);
}
</script>
</head>
<body>
<h1>PDF Rendering on the Web</h1>
<p><b>This is a demo of rendering a PDF document entirely in
JavaScript, without any plugins</b>. It uses <a href="http://poppler.freedesktop.org/">Poppler</a>, an open source PDF library,
which was compiled to JavaScript using <a href="http://emscripten.org">Emscripten</a>. Also used in this
demo is <a href="http://www.freetype.org/">FreeType</a> for font rendering.</p>
<p>After the PDF is
decoded into pixel data, it is rendered using a Canvas element. This demo should therefore work in any web
browser that supports the Canvas element.</p>
<p><b>Click 'Go!'</b> to render a example PDF file.</p>
<p>You can also change the URL to that of a PDF document, which will be
downloaded and rendered. In order to process the binary data,
<a href="https://developer.mozilla.org/en/using_xmlhttprequest#Receiving_binary_data_using_JavaScript_typed_arrays">mozResponseArrayBuffer</a>
is used, which is specific to Firefox 4. Note also that the usual limitations of cross-site XHRs apply, so
you may not be able to download PDFs from random servers (as an example, try
<a href="http://www.syntensity.com/static/emscripten.pdf">emscripten.pdf</a>, which is a PDF
of Emscripten's home page, on this server).</p>
<hr>
<canvas id='canvas' width=1 height=1></canvas>
<hr>
<form onsubmit="render(texty.value); return false">
PDF 2000 URL: <input type="text" name="texty" size=60 value="(replace this with a URL of a PDF document, or just click 'Go!')" onclick="if (value[0] === '(') value=''"><br>
<input type="submit" value="Go!">
</form>
<hr>
<div id="output" style="font-family: Courier New,Courier,monospace;"></div>
</body>
</html>
|
