Squashed 'external/libwebp/libwebp/' content from commit dd7364c3c
git-subtree-dir: external/libwebp/libwebp git-subtree-split: dd7364c3cefe0f5c0b3c18c3b1887d353f90fc1f
This commit is contained in:
81
webp_js/README.md
Normal file
81
webp_js/README.md
Normal file
@ -0,0 +1,81 @@
|
||||
# WebP JavaScript decoder
|
||||
|
||||
```
|
||||
__ __ ____ ____ ____ __ ____
|
||||
/ \\/ \ _ \ _ \ _ \ (__)/ __\
|
||||
\ / __/ _ \ __/ _) \_ \
|
||||
\__\__/_____/____/_/ /____/____/
|
||||
```
|
||||
|
||||
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://emscripten.org/docs/getting_started/downloads.html#installation-instructions-using-the-emsdk-recommended
|
||||
After installation, you should have some global variable positioned to the
|
||||
location of the SDK. In particular, $EMSDK should point to the top-level
|
||||
directory containing Emscripten tools.
|
||||
|
||||
- configure the project 'WEBP_JS' with CMake using:
|
||||
|
||||
```shell
|
||||
cd webp_js && \
|
||||
emcmake cmake -DWEBP_BUILD_WEBP_JS=ON \
|
||||
../
|
||||
```
|
||||
|
||||
- compile webp.js using 'emmake make'.
|
||||
|
||||
- that's it! Upon completion, you should have the 'webp.js', 'webp.js.mem',
|
||||
'webp_wasm.js' and 'webp_wasm.wasm' 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 (see
|
||||
below for instructions).
|
||||
|
||||
## Demo HTML page
|
||||
|
||||
The HTML page webp_js/index.html requires the built files 'webp.js' and
|
||||
'webp.js.mem' to be copied to webp_js/. An HTTP server to serve the WebP image
|
||||
example is also needed. With Python, just run:
|
||||
|
||||
```shell
|
||||
cd webp_js && python3 -m http.server 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' and 'webp_wasm.wasm' that you then need to copy to 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 2.0.18,
|
||||
latest-upstream is recommended) and of your WASM-enabled browser to run this
|
||||
version.
|
||||
|
||||
## Caveats
|
||||
|
||||
- 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.
|
||||
|
||||
- If WEBP_ENABLE_SIMD is set to 1 the JavaScript version (webp.js) will be
|
||||
disabled as wasm2js does not support SIMD.
|
75
webp_js/index.html
Normal file
75
webp_js/index.html
Normal file
@ -0,0 +1,75 @@
|
||||
<!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">
|
||||
|
||||
'use strict';
|
||||
|
||||
// main wrapper for the function decoding a WebP into a canvas object
|
||||
var WebpToCanvas;
|
||||
|
||||
function init() {
|
||||
WebpToCanvas = Module.cwrap('WebPToSDL', 'number', ['array', 'number']);
|
||||
}
|
||||
window.onload = init;
|
||||
|
||||
function decode(webp_data, canvas_id) {
|
||||
// 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 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>
|
||||
<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>
|
90
webp_js/index_wasm.html
Normal file
90
webp_js/index_wasm.html
Normal file
@ -0,0 +1,90 @@
|
||||
<!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>
|
BIN
webp_js/test_webp_js.webp
Normal file
BIN
webp_js/test_webp_js.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.3 MiB |
BIN
webp_js/test_webp_wasm.webp
Normal file
BIN
webp_js/test_webp_wasm.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.3 MiB |
Reference in New Issue
Block a user