diff options
Diffstat (limited to 'demos/openjpeg.html')
| -rw-r--r-- | demos/openjpeg.html | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/demos/openjpeg.html b/demos/openjpeg.html new file mode 100644 index 00000000..47c0d820 --- /dev/null +++ b/demos/openjpeg.html @@ -0,0 +1,107 @@ +<html> +<head> + <title> + Emscripten: OpenJPEG Demo + </title> + <script type="text/javascript"> + arguments = []; + NO_RUN = 1; + </script> + <script src="openjpeg.cc.js"></script> + <script src="syntensity_lobby.j2k.js"></script> + <script type="text/javascript"> + // Wrapper around OpenJPEG + function j2k_to_image(data) { + run(); + _STDIO.prepare('image.j2k', data); + callMain(['-i', 'image.j2k', '-o', 'image.raw']); + return _STDIO.streams[_STDIO.filenames['image.raw']].data; + } + + var imageWidth, imageHeight; + + // print function which the runtime will call. We figure out the image dimensions from there + function print(text) { + document.getElementById('output').innerHTML += text + '<br>'; + var m = /Component 0 characteristics: (\d+)x(\d+)x(\d+) unsigned/.exec(text); + if (!m) return; + imageWidth = m[1]; + imageHeight = m[2]; + document.getElementById('output').innerHTML += '<b>(Image dimensions: ' + [imageWidth, imageHeight] + ')</b><br>'; + } + + function render(url) { + imageWidth = imageHeight = null; + + // 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 = ''; + output = j2k_to_image(data); + if (!(imageWidth && imageHeight)) { // We should have figured these values out + alert('An error occurred.'); + return; + } + + var canvas = document.getElementById('canvas'); + canvas.width = imageWidth; + canvas.height = imageHeight; + + var ctx = canvas.getContext('2d'); + var image = ctx.getImageData(0, 0, canvas.width, canvas.height); + + var componentSize = canvas.width*canvas.height; + for (var y = 0; y < canvas.height; y++) { + for (var x = 0; x < canvas.width; x++) { + var value = output[y*canvas.width + x]; + var base = (y*canvas.width + x)*4; + image.data[base + 0] = output[0*componentSize + y*canvas.width + x]; + image.data[base + 1] = output[1*componentSize + y*canvas.width + x]; + image.data[base + 2] = output[2*componentSize + y*canvas.width + x]; + image.data[base + 3] = 255; + } + } + ctx.putImageData(image, 0, 0); + } + </script> +</head> +<body> + <h1>JPEG 2000 on the Web</h1> + <p>This is a demo of decoding <a href="http://en.wikipedia.org/wiki/JPEG_2000">JPEG 2000</a> images entirely in + JavaScript. It uses <a href="http://www.openjpeg.org/">OpenJPEG</a>, an open source library for JPEG 2000 images, + which was compiled to JavaScript using <a href="http://emscripten.org">Emscripten</a>.</p> + <p>After the image 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, whether or not that web browser natively supports the JPEG 2000 format.</p> + <p>Click 'Go!' to render a demo image (from <a href="http://syntensity.com/toplevel/screenshots/">here</a>) + which has been encoded into a JSON object. + You can also change the URL to that of a binary JPEG 2000 image, which will be + downloaded and rendered, but I am not aware of a cross-browser way to receive binary data, so it uses + a <a href="https://developer.mozilla.org/en/using_xmlhttprequest#Receiving_binary_data_using_JavaScript_typed_arrays">typed array + property of the XHR</a> (which will only work on Firefox 4).</p> + <hr> + <canvas id='canvas' width=1 height=1></canvas> + <hr> + <form onsubmit="render(texty.value); return false"> + JPEG 2000 URL: <input type="text" name="texty" size=60 value="(replace this with a URL of a JPEG 2000 file, 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> + |