108 строки
4.2 KiB
HTML
108 строки
4.2 KiB
HTML
<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>
|
|
|