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