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