dany/libwebp
1
0
Fork 0
mirror of https://github.com/webmproject/libwebp.git synced 2024-12-25 05:08:21 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

WASM support

Browse Source 
demo page: webp_js/index_wasm.html

Change-Id: I9e6bde205c2730f96c5f30ec01f4bfacf1f5d128
This commit is contained in:
Pascal Massimino 2017-03-20 14:03:57 +01:00
parent ec5036e475
commit 134e314fd8
5 changed files with 107 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
CMakeLists.txt
View File

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

12
README.webp_js
View File

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

84
webp_js/index_wasm.html Normal file
View File

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

BIN
webp_js/test_webp_js.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
webp_js/test_webp_wasm.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB