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