external/libwebp-1.0.0/webp_js/index_wasm.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>simple Javascript WebP decoding demo, using Web-Assembly (WASM)</title>
  <script type="text/javascript">
    var Module = {
      noInitialRun : true
    };
  </script>
  <script type="text/javascript">

'use strict';

// main wrapper for the function decoding a WebP into a canvas object
var WebpToCanvas;

function init() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'webp_wasm.wasm', true);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function() {
    Module.wasmBinary = xhr.response;
    var script = document.createElement('script');
    script.src = "webp_wasm.js";
    document.body.appendChild(script);
  };
  xhr.send(null);
}
window.onload = init;

function decode(webp_data, canvas_id) {
  var result;
  if (Module["asm"] != undefined) {
    // wrapper for the function decoding a WebP into a canvas object
    WebpToCanvas = Module.cwrap('WebpToSDL', 'number', ['array', 'number']);
    // get the canvas to decode into
    var canvas = document.getElementById(canvas_id);
    if (canvas == null) return;
    // clear previous picture (if any)
    Module.canvas = canvas;
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
    // decode and measure timing
    var start = new Date();
    var ret = WebpToCanvas(webp_data, webp_data.length);
    var end = new Date();
    var decode_time = end - start;
    result = 'decoding time: ' + decode_time +' ms.';
  } else {
    result = "WASM module not finished loading! Please retry";
  }
  // display timing result
  var speed_result = document.getElementById('timing');
  if (speed_result != null) {
    speed_result.innerHTML = '<p>'+ result + '</p>';
  }
}

function loadfile(filename, canvas_id) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', filename);
  xhr.responseType = 'arraybuffer';
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var webp_data = new Uint8Array(xhr.response);
      decode(webp_data, canvas_id);
    }
  };
  xhr.send();
}
  </script>
</head>

<body>
  <p>
    <strong>WebP demo using Web-Assembly</strong> -
  </p>
  <p>
    WASM version of the WebP decoder, using libwebp compiled with
    <a href="https://github.com/kripken/emscripten/wiki">Emscripten</a>.
  </p>
  <p id="image_buttons">
    <input type="button" value="test image!"
           onclick="loadfile('./test_webp_wasm.webp', 'output_canvas')">
  </p>
  <p id="timing">Timing: N/A</p>
  <canvas id="output_canvas">Your browser does not support canvas</canvas>
</body>
</html>