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