← Back to branch summary

~ubuntu-branches/ubuntu/vivid/emscripten/vivid

« back to all changes in this revision

Viewing changes to demos/openjpeg.html

  • Committer: Package Import Robot
  • Author(s): Sylvestre Ledru
  • Date: 2013-05-02 13:11:51 UTC
  • Revision ID: package-import@ubuntu.com-20130502131151-q8dvteqr1ef2x7xz
Tags: upstream-1.4.1~20130504~adb56cb
Import upstream version 1.4.1~20130504~adb56cb

Show diffs side-by-side

added added

removed removed

Lines of Context:
demos/openjpeg.html
 
1
<html>
 
2
<head>
 
3
  <title>
 
4
    Emscripten: OpenJPEG Demo
 
5
  </title>
 
6
  <script type="text/javascript">
 
7
    arguments = [];
 
8
    NO_RUN = 1;
 
9
  </script>
 
10
  <script src="openjpeg.cc.js"></script>
 
11
  <script src="syntensity_lobby.j2k.js"></script>
 
12
  <script type="text/javascript">
 
13
    // Wrapper around OpenJPEG
 
14
    function j2k_to_image(data) {
 
15
      run();
 
16
      _STDIO.prepare('image.j2k', data);
 
17
      callMain(['-i', 'image.j2k', '-o', 'image.raw']);
 
18
      return _STDIO.streams[_STDIO.filenames['image.raw']].data;
 
19
    }
 
20
 
 
21
    var imageWidth, imageHeight;
 
22
 
 
23
    // print function which the runtime will call. We figure out the image dimensions from there
 
24
    function print(text) {
 
25
      document.getElementById('output').innerHTML += text + '<br>';
 
26
      var m = /Component 0 characteristics: (\d+)x(\d+)x(\d+) unsigned/.exec(text);
 
27
      if (!m) return;
 
28
      imageWidth = m[1];
 
29
      imageHeight = m[2];
 
30
      document.getElementById('output').innerHTML += '<b>(Image dimensions: ' + [imageWidth, imageHeight] + ')</b><br>';
 
31
    }
 
32
 
 
33
    function render(url) {
 
34
      imageWidth = imageHeight = null;
 
35
 
 
36
      // Demo image by default
 
37
      var data = DEMO_FILE;
 
38
 
 
39
      // If given a URL, fetch it
 
40
      if (url && url[0] != '(') {
 
41
        try {
 
42
          var xhr = new XMLHttpRequest();
 
43
          xhr.open("GET", url, false);
 
44
          xhr.send(null);
 
45
          var buffer = xhr.mozResponseArrayBuffer;
 
46
          if (buffer) data = new Uint8Array(buffer);
 
47
        } catch(e) {
 
48
          alert('Could not load URL: ' + e);
 
49
          return;
 
50
        }
 
51
      }
 
52
 
 
53
      document.getElementById('output').innerHTML = '';
 
54
      output = j2k_to_image(data);
 
55
      if (!(imageWidth && imageHeight)) { // We should have figured these values out
 
56
        alert('An error occurred.');
 
57
        return;
 
58
      }
 
59
 
 
60
      var canvas = document.getElementById('canvas');
 
61
      canvas.width = imageWidth;
 
62
      canvas.height = imageHeight;
 
63
 
 
64
      var ctx = canvas.getContext('2d');
 
65
      var image = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
66
 
 
67
      var componentSize = canvas.width*canvas.height;
 
68
      for (var y = 0; y < canvas.height; y++) {
 
69
        for (var x = 0; x < canvas.width; x++) {
 
70
          var value = output[y*canvas.width + x];
 
71
          var base = (y*canvas.width + x)*4;
 
72
          image.data[base + 0] = output[0*componentSize + y*canvas.width + x];
 
73
          image.data[base + 1] = output[1*componentSize + y*canvas.width + x];
 
74
          image.data[base + 2] = output[2*componentSize + y*canvas.width + x];
 
75
          image.data[base + 3] = 255;
 
76
        }
 
77
      }
 
78
      ctx.putImageData(image, 0, 0);
 
79
    }
 
80
  </script>
 
81
</head>
 
82
<body>
 
83
  <h1>JPEG 2000 on the Web</h1>
 
84
  <p>This is a demo of decoding <a href="http://en.wikipedia.org/wiki/JPEG_2000">JPEG 2000</a> images entirely in
 
85
     JavaScript. It uses <a href="http://www.openjpeg.org/">OpenJPEG</a>, an open source library for JPEG 2000 images,
 
86
     which was compiled to JavaScript using <a href="http://emscripten.org">Emscripten</a>.</p>
 
87
  <p>After the image is
 
88
     decoded into pixel data, it is rendered using a Canvas element. This demo should therefore work in any web
 
89
     browser that supports the Canvas element, whether or not that web browser natively supports the JPEG 2000 format.</p>
 
90
  <p><b>Click 'Go!'</b> to render a demo image (from <a href="http://syntensity.com/toplevel/screenshots/">here</a>)
 
91
     which has been encoded into a JSON object.
 
92
     You can also change the URL to that of a binary JPEG 2000 image, which will be
 
93
     downloaded and rendered, but I am not aware of a cross-browser way to receive binary data, so it uses
 
94
     a <a href="https://developer.mozilla.org/en/using_xmlhttprequest#Receiving_binary_data_using_JavaScript_typed_arrays">typed array
 
95
     property of XHRs</a> (which will only work on Firefox 4).</p>
 
96
  <hr>
 
97
  <canvas id='canvas' width=1 height=1></canvas>
 
98
  <hr>
 
99
  <form onsubmit="render(texty.value); return false">
 
100
    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>
 
101
    <input type="submit" value="Go!">
 
102
  </form>
 
103
  <hr>
 
104
  <div id="output" style="font-family: Courier New,Courier,monospace;"></div>
 
105
</body>
 
106
</html>
 
107