mirror of
https://github.com/webmproject/libwebp.git
synced 2025-10-31 10:25:46 +01:00
f88666eb47
after:24d7f9cbSwitch code to SDL2. fixes: webp_wasm.js:1 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at Object.registerOrRemoveHandler (webp_wasm.js:1:101330) at registerMouseEventCallback (webp_wasm.js:1:154227) at _emscripten_set_mousemove_callback_on_thread (webp_wasm.js:1:155015) ... The SDL2 port forces the canvas id to '#canvas':324df6865a/src/video/emscripten/SDL_emscriptenvideo.c (L210)This change maps '#output_canvas' to this entry in specialHTMLTargets[]: https://emscripten.org/docs/api_reference/html5.h.html https://github.com/libsdl-org/SDL/issues/5260 & https://github.com/emscripten-ports/SDL2/issues/130 may also be related. Change-Id: I26f4aa22b9d68b0fc45b83edfe6fe074b59a82a7 Test: emscripten 3.1.16
79 lines
2.2 KiB
HTML
79 lines
2.2 KiB
HTML
<!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 src="./webp_wasm.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
'use strict';
|
|
|
|
// main wrapper for the function decoding a WebP into a canvas object
|
|
var WebpToCanvas;
|
|
|
|
Module.onRuntimeInitialized = async () => {
|
|
// wrapper for the function decoding a WebP into a canvas object
|
|
WebpToCanvas = Module.cwrap('WebPToSDL', 'number', ['array', 'number']);
|
|
};
|
|
|
|
function decode(webp_data, canvas_id) {
|
|
var result;
|
|
// 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);
|
|
// Map this canvas to the default selector used by emscripten/SDL2.
|
|
specialHTMLTargets["#canvas"] = Module.canvas;
|
|
// decode and measure timing
|
|
var start = new Date();
|
|
var ret = WebpToCanvas(webp_data, webp_data.length);
|
|
var end = new Date();
|
|
var decodeTime = end - start;
|
|
result = 'decoding time: ' + decodeTime +' ms.';
|
|
// 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>
|