WASM support

demo page: webp_js/index_wasm.html Change-Id: I9e6bde205c2730f96c5f30ec01f4bfacf1f5d128
2017-03-20 14:03:57 +01:00 · 2017-03-20 14:03:57 +01:00 · 134e314fd8
commit 134e314fd8
parent ec5036e475
5 changed files with 107 additions and 0 deletions
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@ -247,6 +247,7 @@ if(WEBP_BUILD_IMG2WEBP)
 endif()

 if(WEBP_BUILD_WEBP_JS)
+  # JavaScript version
  add_executable(webp_js
                 ${CMAKE_CURRENT_SOURCE_DIR}/extras/webp_to_sdl.c)
  target_link_libraries(webp_js webpdecoder SDL)
@ -254,6 +255,16 @@ if(WEBP_BUILD_WEBP_JS)
      "-s EXPORTED_FUNCTIONS='[\"_WebpToSDL\"]' -s INVOKE_RUN=0")
  set_target_properties(webp_js PROPERTIES OUTPUT_NAME webp)
  target_compile_definitions(webp_js PUBLIC EMSCRIPTEN WEBP_HAVE_SDL)
+
+  # WASM version
+  add_executable(webp_wasm
+                 ${CMAKE_CURRENT_SOURCE_DIR}/extras/webp_to_sdl.c)
+  target_link_libraries(webp_wasm webpdecoder SDL)
+  set_target_properties(webp_wasm PROPERTIES LINK_FLAGS
+      "-s WASM=1 -s 'BINARYEN_METHOD=\"native-wasm\"' \
+      -s EXPORTED_FUNCTIONS='[\"_WebpToSDL\"]' -s INVOKE_RUN=0")
+  target_compile_definitions(webp_wasm PUBLIC EMSCRIPTEN WEBP_HAVE_SDL)
+
  target_compile_definitions(webpdecoder PUBLIC EMSCRIPTEN)
 endif()

--- a/README.webp_js
+++ b/README.webp_js
@ -45,6 +45,18 @@ cd webp_js && python -m SimpleHTTPServer 8080
 and then navigate to http://localhost:8080 in your favorite browser.


+Web-Assembly (WASM) version:
+============================
+
+  CMakeLists.txt is configured to build the WASM version when using
+  the option WEBP_BUILD_WEBP_JS=ON. The compilation step will assemble
+  the files 'webp_wasm.js', 'webp_wasm.wasm' in the webp_js/ directory.
+  See webp_js/index_wasm.html for a simple demo page using the WASM version
+  of the library.
+
+  You will need a fairly recent version of Emscripten (at least 1.37.8) and of
+  your WASM-enabled browser to run this version. Consider it very experimental!
+
 Caveat:
 =======

--- a/webp_js/index_wasm.html
+++ b/webp_js/index_wasm.html
@ -0,0 +1,84 @@
+<!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">
+
+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);
+}
+
+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
+    start = new Date();
+    var ret = WebpToCanvas(webp_data, webp_data.length);
+    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
+  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 onload='init()'>
+  <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>
--- a/webp_js/test_webp_js.webp
+++ b/webp_js/test_webp_js.webp
--- a/webp_js/test_webp_wasm.webp
+++ b/webp_js/test_webp_wasm.webp