mirror of
https://github.com/webmproject/libwebp.git
synced 2024-12-26 05:38:22 +01:00
70 lines
1.9 KiB
HTML
70 lines
1.9 KiB
HTML
|
<!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>
|