對於WebAssembly編譯出來的.wasm文件js如何調用
阿新 • • 發佈：2018-11-02
下載 終端 sem 映射 http htm -o 很多 serve
WebAssembly也叫瀏覽器字節碼技術 這裏就不過多的解釋了網上很多介紹
主要是讓大家知道在js裏面如何調用執行它，我之前看WebAssemblyAPI時候反正是看得一臉懵逼
也是為了大家能更快的入手這個比較新的技術吧
這邊寫的一個dom是官方推薦的c/c++編譯的
c代碼
1 int add (int x, int y) { 2 return x + y; 3 } 4 5 int square (int x) { 6 return x * x; 7 }
屬性c但是對字節碼不熟悉的朋友可能會不理解，為什麽沒有main函數
這裏主要是把這個c代碼當成一個模塊調用不需要它自己執行所以沒有，官方也有有main函數的能直接生成js和html但是太過雍於，
這種方式比較推薦，也是讓js能直接調用比較方便
之後使用 emscripten進行編譯 emcc math.c -Os -s WASM=1 -s SIDE_MODULE=1 -o math.wasm
然後就有math.wasm文件了，如果沒裝emscripten的話我博客裏面有一篇是關於安裝的
有了math.wasm文件後就該用js調用它了
新建math.html加入調用的方法如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <h1> 11 12 </h1> 13 <script> 14 /** 15 * @param {String} path wasm 文件路徑16 * @param {Object} imports 傳遞到 wasm 代碼中的變量 17 */ 18 function loadWebAssembly (path, imports = {}) { 19 return fetch(path) // 加載文件 20 .then(response => response.arrayBuffer()) // 轉成 ArrayBuffer 21 .then(buffer => WebAssembly.compile(buffer)) 22 .then(module => { 23 imports.env = imports.env || {} 24 25 // 開辟內存空間 26 imports.env.memoryBase = imports.env.memoryBase || 0 27 if (!imports.env.memory) { 28 imports.env.memory = new WebAssembly.Memory({ initial: 256 }) 29 } 30 31 // 創建變量映射表 32 imports.env.tableBase = imports.env.tableBase || 0 33 if (!imports.env.table) { 34 // 在 MVP 版本中 element 只能是 "anyfunc" 35 imports.env.table = new WebAssembly.Table({ initial: 0, element: ‘anyfunc‘ }) 36 } 37 38 // 創建 WebAssembly 實例 39 return new WebAssembly.Instance(module, imports) 40 }) 41 } 42 //調用 43 loadWebAssembly(‘./math.wasm‘) 44 .then(instance => { 45 const add = instance.exports._add//取出c裏面的方法 46 const square = instance.exports._square//取出c裏面的方法 47 48 console.log(‘10 + 20 =‘, add(10, 20)) 49 console.log(‘3*3 =‘, square(3)) 50 console.log(‘(2 + 5)*2 =‘, square(add(2 + 5))) 51 }) 52 53 </script> 54 </body> 55 </html>
我這裏的路徑math.html和math.wasm是同級的
現在就可以打開瀏覽器查看了 但是fetch方法在本地是不能使用的它是網絡請求 所有這裏需要來個web服務器
打開終端之間鍵入 npm install -g serve
下載web服務器
然後server . 啟動
有點的 .
啟動完成效果:
然後通過web服務器訪問就能看到調用c方法後的計算結果:
對於WebAssembly編譯出來的.wasm文件js如何調用