index_wasm.html (2297B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>simple Javascript WebP decoding demo, using Web-Assembly (WASM)</title> 7 <script type="text/javascript"> 8 var Module = { 9 noInitialRun : true 10 }; 11 </script> 12 <script src="./webp_wasm.js"></script> 13 <script type="text/javascript"> 14 15 'use strict'; 16 17 // main wrapper for the function decoding a WebP into a canvas object 18 var WebpToCanvas; 19 20 Module.onRuntimeInitialized = async () => { 21 // wrapper for the function decoding a WebP into a canvas object 22 WebpToCanvas = Module.cwrap('WebPToSDL', 'number', ['array', 'number']); 23 }; 24 25 function decode(webp_data, canvas_id) { 26 var result; 27 // get the canvas to decode into 28 var canvas = document.getElementById(canvas_id); 29 if (canvas == null) return; 30 // clear previous picture (if any) 31 Module.canvas = canvas; 32 canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height); 33 // Map this canvas to the default selector used by emscripten/SDL2. 34 specialHTMLTargets["#canvas"] = Module.canvas; 35 // decode and measure timing 36 var start = new Date(); 37 var ret = WebpToCanvas(webp_data, webp_data.length); 38 var end = new Date(); 39 var decodeTime = end - start; 40 result = 'decoding time: ' + decodeTime +' ms.'; 41 // display timing result 42 var speed_result = document.getElementById('timing'); 43 if (speed_result != null) { 44 speed_result.innerHTML = '<p>'+ result + '</p>'; 45 } 46 } 47 48 function loadfile(filename, canvas_id) { 49 var xhr = new XMLHttpRequest(); 50 xhr.open('GET', filename); 51 xhr.responseType = 'arraybuffer'; 52 xhr.onreadystatechange = function() { 53 if (xhr.readyState == 4 && xhr.status == 200) { 54 var webp_data = new Uint8Array(xhr.response); 55 decode(webp_data, canvas_id); 56 } 57 }; 58 xhr.send(); 59 } 60 </script> 61 </head> 62 63 <body> 64 <p> 65 <strong>WebP demo using Web-Assembly</strong> - 66 </p> 67 <p> 68 WASM version of the WebP decoder, using libwebp compiled with 69 <a href="https://github.com/kripken/emscripten/wiki">Emscripten</a>. 70 </p> 71 <p id="image_buttons"> 72 <input type="button" value="test image!" 73 onclick="loadfile('./test_webp_wasm.webp', 'output_canvas')"> 74 </p> 75 <p id="timing">Timing: N/A</p> 76 <canvas id="output_canvas">Your browser does not support canvas</canvas> 77 </body> 78 </html>