diff options
Diffstat (limited to 'demos/openjpeg.html')
| -rw-r--r-- | demos/openjpeg.html | 107 |
1 files changed, 0 insertions, 107 deletions
diff --git a/demos/openjpeg.html b/demos/openjpeg.html deleted file mode 100644 index 292ecfad..00000000 --- a/demos/openjpeg.html +++ /dev/null @@ -1,107 +0,0 @@ -<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><b>Click 'Go!'</b> 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 XHRs</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> - |