generic-library/webp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge "WebP-JS: emscripten-based Javascript decoder"

Browse Source
This commit is contained in:
Pascal Massimino 2017-02-07 20:20:19 +00:00 committed by Gerrit Code Review
commit 9ee32a7506
4 changed files with 149 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
CMakeLists.txt
View File

@ -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_DWEBP "Build the dwebp command line tool." OFF)
option(WEBP_BUILD_GIF2WEBP "Build the gif2webp conversion 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_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_EXPERIMENTAL_FEATURES "Build with experimental features." OFF)
option(WEBP_ENABLE_SWAP_16BIT_CSP "Enable byte swap for 16 bit colorspaces." 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_LIBRARIES)
set(WEBP_DEP_INCLUDE_DIRS) set(WEBP_DEP_INCLUDE_DIRS)
@ -135,7 +140,7 @@ endforeach()
# Build the executables if asked for. # Build the executables if asked for.
if(WEBP_BUILD_CWEBP OR WEBP_BUILD_DWEBP OR 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. # Example utility library.
parse_Makefile_am(${CMAKE_CURRENT_SOURCE_DIR}/examples "EXAMPLEUTIL_SRCS" parse_Makefile_am(${CMAKE_CURRENT_SOURCE_DIR}/examples "EXAMPLEUTIL_SRCS"
"example_util_[^ ]*") "example_util_[^ ]*")
@ -204,3 +209,14 @@ if(WEBP_BUILD_IMG2WEBP)
add_executable(img2webp ${IMG2WEBP_SRCS}) add_executable(img2webp ${IMG2WEBP_SRCS})
target_link_libraries(img2webp exampleutil imagedec imageioutil webp webpmux) target_link_libraries(img2webp exampleutil imagedec imageioutil webp webpmux)
endif() 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()

63
README.webp_js Normal file
View File

@ -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.

69
webp_js/index.html Normal file
View File

@ -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>

BIN
webp_js/test_webp_js.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB