dany/libwebp
1
0
Fork 0
mirror of https://github.com/webmproject/libwebp.git synced 2025-07-12 22:14:29 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

WebP-JS: emscripten-based Javascript decoder

Browse Source 
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
This commit is contained in:
Pascal Massimino
2017-02-07 10:25:41 +01:00
parent 5b393f2d2a
commit ca9f7b7dd6
4 changed files with 149 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>