| <!DOCTYPE html> |
| <!-- |
| Copyright 2020 Google LLC |
| |
| Licensed under the Apache License, Version 2.0 (the "License"); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <title>simple Javascript WP2 decoding demo, using Web-Assembly (WASM)</title> |
| <script type="text/javascript"> |
| var Module = { |
| noInitialRun : true |
| }; |
| </script> |
| <script type="text/javascript"> |
| |
| 'use strict'; |
| |
| // main wrapper for the function decoding a WP2 into a canvas object |
| var WP2ToCanvas; |
| |
| function init() { |
| var xhr = new XMLHttpRequest(); |
| xhr.open('GET', 'wp2_wasm.wasm', true); |
| xhr.responseType = 'arraybuffer'; |
| xhr.onload = function() { |
| Module.wasmBinary = xhr.response; |
| var script = document.createElement('script'); |
| script.src = "wp2_wasm.js"; |
| document.body.appendChild(script); |
| }; |
| xhr.send(null); |
| } |
| window.onload = init; |
| |
| function decode(wp2_data, canvas_id) { |
| var result; |
| if (Module["asm"] != undefined) { |
| // wrapper for the function decoding a WP2 into a canvas object |
| WP2ToCanvas = Module.cwrap('WP2ToSDL', 'number', ['array', 'number']); |
| // 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); |
| // decode and measure timing |
| var start = new Date(); |
| var ret = WP2ToCanvas(wp2_data, wp2_data.length); |
| var end = new Date(); |
| var decode_time = end - start; |
| result = 'decoding time: ' + decode_time +' ms.'; |
| } else { |
| result = "WASM module not finished loading! Please retry"; |
| } |
| // 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 wp2_data = new Uint8Array(xhr.response); |
| decode(wp2_data, canvas_id); |
| } |
| }; |
| xhr.send(); |
| } |
| </script> |
| </head> |
| |
| <body> |
| <p> |
| <strong>WP2 demo using Web-Assembly</strong> - |
| </p> |
| <p> |
| WASM version of the WP2 decoder, using libwp2 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_wp2_wasm.wp2', 'output_canvas')"> |
| </p> |
| <p id="timing">Timing: N/A</p> |
| <canvas id="output_canvas">Your browser does not support canvas</canvas> |
| </body> |
| </html> |
