|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
<html lang="en">
|
|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
<head>
|
|
Packit |
9c6abc |
<meta charset="UTF-8">
|
|
Packit |
9c6abc |
<title>simple Javascript WebP decoding demo</title>
|
|
Packit |
9c6abc |
<script type="text/javascript">
|
|
Packit |
9c6abc |
var Module = {
|
|
Packit |
9c6abc |
noInitialRun : true
|
|
Packit |
9c6abc |
};
|
|
Packit |
9c6abc |
</script>
|
|
Packit |
9c6abc |
<script type="text/javascript" src="./webp.js"></script>
|
|
Packit |
9c6abc |
<script type="text/javascript">
|
|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
'use strict';
|
|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
// main wrapper for the function decoding a WebP into a canvas object
|
|
Packit |
9c6abc |
var WebpToCanvas;
|
|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
function init() {
|
|
Packit |
9c6abc |
WebpToCanvas = Module.cwrap('WebpToSDL', 'number', ['array', 'number']);
|
|
Packit |
9c6abc |
}
|
|
Packit |
9c6abc |
window.onload = init;
|
|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
function decode(webp_data, canvas_id) {
|
|
Packit |
9c6abc |
// get the canvas to decode into
|
|
Packit |
9c6abc |
var canvas = document.getElementById(canvas_id);
|
|
Packit |
9c6abc |
if (canvas == null) return;
|
|
Packit |
9c6abc |
// clear previous picture (if any)
|
|
Packit |
9c6abc |
Module.canvas = canvas;
|
|
Packit |
9c6abc |
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
|
|
Packit |
9c6abc |
// decode and measure timing
|
|
Packit |
9c6abc |
var start = new Date();
|
|
Packit |
9c6abc |
var ret = WebpToCanvas(webp_data, webp_data.length);
|
|
Packit |
9c6abc |
var end = new Date();
|
|
Packit |
9c6abc |
var speed_result = document.getElementById('timing');
|
|
Packit |
9c6abc |
// display timing result
|
|
Packit |
9c6abc |
if (speed_result != null) {
|
|
Packit |
9c6abc |
var decode_time = end - start;
|
|
Packit |
9c6abc |
speed_result.innerHTML = 'decoding time: ' + decode_time +' ms. ';
|
|
Packit |
9c6abc |
}
|
|
Packit |
9c6abc |
}
|
|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
function loadfile(filename, canvas_id) {
|
|
Packit |
9c6abc |
var xhr = new XMLHttpRequest();
|
|
Packit |
9c6abc |
xhr.open('GET', filename);
|
|
Packit |
9c6abc |
xhr.responseType = 'arraybuffer';
|
|
Packit |
9c6abc |
xhr.onreadystatechange = function() {
|
|
Packit |
9c6abc |
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
Packit |
9c6abc |
var webp_data = new Uint8Array(xhr.response);
|
|
Packit |
9c6abc |
decode(webp_data, canvas_id);
|
|
Packit |
9c6abc |
}
|
|
Packit |
9c6abc |
};
|
|
Packit |
9c6abc |
xhr.send();
|
|
Packit |
9c6abc |
}
|
|
Packit |
9c6abc |
</script>
|
|
Packit |
9c6abc |
</head>
|
|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
<body>
|
|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
WebP in JavaScript demo -
|
|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
WebP decoder in JavaScript, using libwebp compiled with
|
|
Packit |
9c6abc |
Emscripten.
|
|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
onclick="loadfile(this.name, 'output_canvas')">
|
|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
Timing: N/A
|
|
Packit |
9c6abc |
<canvas id="output_canvas">Your browser does not support canvas</canvas>
|
|
Packit |
9c6abc |
|
|
Packit |
9c6abc |
</body>
|
|
Packit |
9c6abc |
</html>
|