備忘錄_20160105(定位) 修改 回首頁

程式 2019-05-16 12:23:35 1557980615 100
WebAssembly 簡單測試

WebAssembly 簡單測試
線上產生 *.wat, *.wasm, CodeBuffer 等等資料


原始 C 語言程式如下
double getDAdd(double a, double b)
{
  return a+b;
}

產生之 CodeBuffer 如下
var wasmCode = new Uint8Array([0,97,115,109,1,0,0,0,1,135,128,128,128,0,1,96,2,124,124,1,124,3,130,128,128,128,0,1,0,4,132,128,128,128,0,1,112,0,0,5,131,128,128,128,0,1,0,1,6,129,128,128,128,0,0,7,148,128,128,128,0,2,6,109,101,109,111,114,121,2,0,7,103,101,116,68,65,100,100,0,0,10,141,128,128,128,0,1,135,128,128,128,0,0,32,0,32,1,160,11]);
產生之 *.wat 如下
(module
 (table 0 anyfunc)
 (memory $0 1)
 (export "memory" (memory $0))
 (export "getDAdd" (func $getDAdd))
 (func $getDAdd (; 0 ;) (param $0 f64) (param $1 f64) (result f64)
  (f64.add
   (get_local $0)
   (get_local $1)
  )
 )
)

一種呼叫方式,運用 Code Buffer
可點此進入測試網頁
網頁程式如下供參考
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  </head>
  <body>
    <script>

      var wasmCode = new Uint8Array([0,97,115,109,1,0,0,0,1,135,128,128,128,0,1,96,2,124,124,1,124,3,130,128,128,128,0,1,0,4,132,128,128,128,0,1,112,0,0,5,131,128,128,128,0,1,0,1,6,129,128,128,128,0,0,7,148,128,128,128,0,2,6,109,101,109,111,114,121,2,0,7,103,101,116,68,65,100,100,0,0,10,141,128,128,128,0,1,135,128,128,128,0,0,32,0,32,1,160,11]);
      var wasmModule = new WebAssembly.Module(wasmCode);
      
      var imports = imports || {};
      imports.env = imports.env || {};
      imports.env.memoryBase = imports.env.memoryBase || 0;
      imports.env.tableBase = imports.env.tableBase || 0;
      if (!imports.env.memory) 
      {
        imports.env.memory = new WebAssembly.Memory({ initial: 256 });
      }
      if (!imports.env.table) 
      {
        imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' });
      }
          
      var wasmInstance = new WebAssembly.Instance(wasmModule, imports);
      alert("0.1 + 0.2 = "+wasmInstance.exports.getDAdd(0.1, 0.2));
      
    </script>
  </body>
</html>

一種呼叫方式,運用 *.wasm
可點此進入測試網頁
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  </head>
  <body>
    <script>

      var m1;
      
      var imports = imports || {};
      imports.env = imports.env || {};
      imports.env.memoryBase = imports.env.memoryBase || 0;
      imports.env.tableBase = imports.env.tableBase || 0;
      if (!imports.env.memory) 
      {
        imports.env.memory = new WebAssembly.Memory({ initial: 256 });
      }
      if (!imports.env.table) 
      {
        imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' });
      }
      
      function fetchAndInstantiateWasm (url, imports) {
          return fetch(url) // url could be your .wasm file
          .then(res => {
          if (res.ok)
              return res.arrayBuffer();
          throw new Error(`Unable to fetch Web Assembly file ${url}.`);
          })
          .then(bytes => WebAssembly.compile(bytes))
          .then(module => WebAssembly.instantiate(module, imports || {}))
          .then(instance => instance.exports);
      }    
     
      window.onload=function()
      {
        fetchAndInstantiateWasm('20190516_wasm.wasm', imports)
        .then(m => {
          m1=m;
          alert("0.1 + 0.2 = "+m1.getDAdd(0.1, 0.2));
        });
      }
     
    </script>
  </body>
</html>