Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

openjpeg demo

  • Loading branch information...
commit 749e2d5031af8567a5a0a7db3d12cf6b65035ca6 1 parent 6db5de7
@azakai azakai authored
View
863 demos/openjpeg.cc.js
863 additions, 0 deletions not shown
View
107 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>
+
View
2,094 demos/syntensity_lobby.j2k.js
2,094 additions, 0 deletions not shown
View
12 tests/runner.py
@@ -1658,9 +1658,9 @@ def test_openjpeg(self):
def post(filename):
src = open(filename, 'r').read().replace(
'// {{PRE_RUN_ADDITIONS}}',
- '''this._STDIO.prepare('image.j2k', %s);''' % str(
+ '''this._STDIO.prepare('image.j2k', %s);''' % line_splitter(str(
map(ord, open(original_j2k, 'rb').read())
- )
+ ))
).replace(
'// {{POST_RUN_ADDITIONS}}',
'''print("Data: " + JSON.stringify(this._STDIO.streams[this._STDIO.filenames['image.raw']].data));'''
@@ -1706,11 +1706,11 @@ def image_compare(output):
true_mean = true_total/float(num)
diff_mean = diff_total/float(num)
- image_mean = 83
+ image_mean = 83.265
#print '[image stats:', js_mean, image_mean, true_mean, diff_mean, num, ']'
- assert abs(js_mean - image_mean) < 2
- assert abs(true_mean - image_mean) < 2
- assert diff_mean < 2 # XXX All of these are not quite right...
+ assert abs(js_mean - image_mean) < 0.01
+ assert abs(true_mean - image_mean) < 0.01
+ assert diff_mean < 0.01
return output
View
18 tools/shared.py
@@ -41,3 +41,21 @@ def to_cc(cxx):
# By default, LLVM_GCC and CLANG are really the C++ versions. This gets an explicit C version
return cxx.replace('clang++', 'clang').replace('g++', 'gcc')
+def line_splitter(data):
+ '''
+ Silly little tool to split JSON arrays over many lines.
+ '''
+
+ out = ''
+ counter = 0
+
+ for i in range(len(data)):
+ out += data[i]
+ if data[i] == ' ' and counter > 60:
+ out += '\n'
+ counter = 0
+ else:
+ counter += 1
+
+ return out
+
Please sign in to comment.
Something went wrong with that request. Please try again.