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