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