<!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>