WebP-JS: emscripten-based Javascript decoder

The build is based on CMake.

There is a demo HTML page under webp_js/index.html

See README.webp_js file.

BUG=webp:261

Change-Id: I6612378b89907efd7b863720c6becf98385fc406

CMakeLists.txt

@@ -8,9 +8,14 @@ option(WEBP_BUILD_CWEBP "Build the cwebp command line tool." OFF)
 option(WEBP_BUILD_DWEBP "Build the dwebp command line tool." OFF)
 option(WEBP_BUILD_GIF2WEBP "Build the gif2webp conversion tool." OFF)
 option(WEBP_BUILD_IMG2WEBP "Build the img2webp animation tool." OFF)
+option(WEBP_BUILD_WEBP_JS "Emscripten build of webp.js." OFF)
 option(WEBP_EXPERIMENTAL_FEATURES "Build with experimental features." OFF)
 option(WEBP_ENABLE_SWAP_16BIT_CSP "Enable byte swap for 16 bit colorspaces." OFF)
 
+if(WEBP_BUILD_WEBP_JS)
+  set(WEBP_ENABLE_SIMD OFF)
+endif()
+
 set(WEBP_DEP_LIBRARIES)
 set(WEBP_DEP_INCLUDE_DIRS)
 
@@ -135,7 +140,7 @@ endforeach()
 
 # Build the executables if asked for.
 if(WEBP_BUILD_CWEBP OR WEBP_BUILD_DWEBP OR
-   WEBP_BUILD_GIF2WEBP OR WEBP_BUILD_IMG2WEBP)
+   WEBP_BUILD_GIF2WEBP OR WEBP_BUILD_IMG2WEBP OR WEBP_BUILD_WEBP_JS)
   # Example utility library.
   parse_Makefile_am(${CMAKE_CURRENT_SOURCE_DIR}/examples "EXAMPLEUTIL_SRCS"
     "example_util_[^ ]*")
@@ -204,3 +209,14 @@ if(WEBP_BUILD_IMG2WEBP)
   add_executable(img2webp ${IMG2WEBP_SRCS})
   target_link_libraries(img2webp exampleutil imagedec imageioutil webp webpmux)
 endif()
+
+if(WEBP_BUILD_WEBP_JS)
+  add_executable(webp_js
+                 ${CMAKE_CURRENT_SOURCE_DIR}/extras/webp_to_sdl.c)
+  target_link_libraries(webp_js webpdecoder SDL)
+  set_target_properties(webp_js PROPERTIES LINK_FLAGS
+      "-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)
+  target_compile_definitions(webpdecoder PUBLIC EMSCRIPTEN)
+endif()

README.webp_js

@@ -0,0 +1,63 @@
+     __   __ ____ ____ ____     __  ____
+    /  \\/  \  _ \  _ \  _ \   (__)/  __\
+    \       /  __/ _  \  __/   _)  \_   \
+     \__\__/_____/____/_/     /____/____/
+
+Description:
+============
+
+This file describes the compilation of libwebp into a JavaScript decoder
+using Emscripten and CMake.
+
+ - install the Emscripten SDK following the procedure described at:
+   https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html
+   After installation, you should have some global variable positioned to the
+   location of the SDK. In particular, $EMSCRIPTEN should point to the
+   top-level directory containing Emscripten tools.
+
+ - make sure the file $EMSCRIPTEN/cmake/Modules/Platform/Emscripten.cmake is
+   accessible. This is the toolchain file used by CMake to invoke Emscripten.
+
+ - configure the project 'WEBP_JS' with CMake using:
+
+ cd webp_js && \
+ cmake -DWEBP_BUILD_WEBP_JS=ON \
+       -DEMSCRIPTEN_GENERATE_BITCODE_STATIC_LIBRARIES=1 \
+       -DCMAKE_TOOLCHAIN_FILE=$EMSCRIPTEN/cmake/Modules/Platform/Emscripten.cmake \
+       ../
+
+ - compile webp.js using 'make'.
+
+ - that's it! Upon completion, you should have the webp.js and
+   webp.js.mem files generated.
+
+The callable JavaScript function is WebPToSDL(), which decodes a raw WebP
+bitstream into a canvas. See webp_js/index.html for a simple usage sample.
+
+Demo HTML page:
+===============
+
+   The HTML page webp_js/index.html requires an HTTP server to serve the WebP
+   image example. It's easy to just use Python for that.
+
+cd webp_js && python -m SimpleHTTPServer 8080
+
+and then navigate to http://localhost:8080 in your favorite browser.
+
+
+Caveat:
+=======
+
+  - First decoding using the library is usually slower, due to just-in-time
+    compilation.
+
+  - Some versions of llvm produce the following compile error when SSE2 is
+    enabled.
+
+"Unsupported:   %516 = bitcast <8 x i16> %481 to i128
+ LLVM ERROR: BitCast Instruction not yet supported for integer types larger than 64 bits"
+
+    The corresponding Emscripten bug is at:
+    https://github.com/kripken/emscripten/issues/3788
+
+    Therefore, SSE2 optimization is currently disabled in CMakeLists.txt.

webp_js/index.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>simple Javascript WebP decoding demo</title>
+  <script type="text/javascript">
+    var Module = {
+      noInitialRun : true
+    };
+  </script>
+  <script type="text/javascript" src="./webp.js"></script>
+  <script type="text/javascript">
+
+// main wrapper for the function decoding a WebP into a canvas object
+var WebpToCanvas;
+
+function init() {
+  WebpToCanvas = Module.cwrap('WebpToSDL', 'number', ['array', 'number']);
+}
+
+function decode(webp_data, canvas_id) {
+  // get the canvas to decode into
+  Module.canvas = document.getElementById(canvas_id);
+  if (Module.canvas == null) return;
+  // decode and measure timing
+  start = new Date();
+  var ret = WebpToCanvas(webp_data, webp_data.length);
+  end = new Date();
+  speed_result = document.getElementById('timing');
+  // display timing result
+  if (speed_result != null) {
+    var decode_time = end - start;
+    speed_result.innerHTML = '<p>decoding time: ' + decode_time +' ms.</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 in JavaScript demo</strong> -
+  </p>
+  <p>
+    WebP decoder in JavaScript, 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!" name="./test_webp_js.webp"
+           onclick="loadfile(this.name, 'output_canvas')">
+  </p>
+  <p id="timing">Timing: N/A</p>
+  <canvas id="output_canvas">Your browser does not support canvas</canvas>
+
+</body>
+</html>