1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <title>simple Javascript WebP decoding demo, using Web-Assembly (WASM)</title>
7  <script type="text/javascript">
8    var Module = {
9      noInitialRun : true
10    };
11  </script>
12  <script type="text/javascript">
13
14'use strict';
15
16// main wrapper for the function decoding a WebP into a canvas object
17var WebpToCanvas;
18
19function init() {
20  var xhr = new XMLHttpRequest();
21  xhr.open('GET', 'webp_wasm.wasm', true);
22  xhr.responseType = 'arraybuffer';
23  xhr.onload = function() {
24    Module.wasmBinary = xhr.response;
25    var script = document.createElement('script');
26    script.src = "webp_wasm.js";
27    document.body.appendChild(script);
28  };
29  xhr.send(null);
30}
31window.onload = init;
32
33function decode(webp_data, canvas_id) {
34  var result;
35  if (Module["asm"] != undefined) {
36    // wrapper for the function decoding a WebP into a canvas object
37    WebpToCanvas = Module.cwrap('WebpToSDL', 'number', ['array', 'number']);
38    // get the canvas to decode into
39    var canvas = document.getElementById(canvas_id);
40    if (canvas == null) return;
41    // clear previous picture (if any)
42    Module.canvas = canvas;
43    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
44    // decode and measure timing
45    var start = new Date();
46    var ret = WebpToCanvas(webp_data, webp_data.length);
47    var end = new Date();
48    var decode_time = end - start;
49    result = 'decoding time: ' + decode_time +' ms.';
50  } else {
51    result = "WASM module not finished loading! Please retry";
52  }
53  // display timing result
54  var speed_result = document.getElementById('timing');
55  if (speed_result != null) {
56    speed_result.innerHTML = '<p>'+ result + '</p>';
57  }
58}
59
60function loadfile(filename, canvas_id) {
61  var xhr = new XMLHttpRequest();
62  xhr.open('GET', filename);
63  xhr.responseType = 'arraybuffer';
64  xhr.onreadystatechange = function() {
65    if (xhr.readyState == 4 && xhr.status == 200) {
66      var webp_data = new Uint8Array(xhr.response);
67      decode(webp_data, canvas_id);
68    }
69  };
70  xhr.send();
71}
72  </script>
73</head>
74
75<body>
76  <p>
77    <strong>WebP demo using Web-Assembly</strong> -
78  </p>
79  <p>
80    WASM version of the WebP decoder, using libwebp compiled with
81    <a href="https://github.com/kripken/emscripten/wiki">Emscripten</a>.
82  </p>
83  <p id="image_buttons">
84    <input type="button" value="test image!"
85           onclick="loadfile('./test_webp_wasm.webp', 'output_canvas')">
86  </p>
87  <p id="timing">Timing: N/A</p>
88  <canvas id="output_canvas">Your browser does not support canvas</canvas>
89</body>
90</html>
91