JS如何呼叫WebAssembly編譯出來的.wasm檔案
阿新 • • 發佈：2020-11-06
WebAssembly也叫瀏覽器位元組碼技術 這裡就不過多的解釋了網上很多介紹
主要是讓大家知道在js裡面如何呼叫執行它，我之前看WebAssemblyAPI時候反正是看得一臉懵逼
也是為了大家能更快的入手這個比較新的技術吧
這邊寫的一個dom是官方推薦的c/c++編譯的
c程式碼
int add (int x,int y) {
return x + y;
}
int square (int x) {
return x * x;
}
屬性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加入呼叫的方法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>
</h1>
<script>
/**
* @param {String} path wasm 檔案路徑
* @param {Object} imports 傳遞到 wasm 程式碼中的變數
*/
function loadWebAssembly (path,imports = {}) {
return fetch(path) // 載入檔案
.then(response => response.arrayBuffer()) // 轉成 ArrayBuffer
.then(buffer => WebAssembly.compile(buffer))
.then(module => {
imports.env = imports.env || {}
// 開闢記憶體空間
imports.env.memoryBase = imports.env.memoryBase || 0
if (!imports.env.memory) {
imports.env.memory = new WebAssembly.Memory({ initial: 256 })
}
// 建立變數對映表
imports.env.tableBase = imports.env.tableBase || 0
if (!imports.env.table) {
// 在 MVP 版本中 element 只能是 "anyfunc"
imports.env.table = new WebAssembly.Table({ initial: 0,element: 'anyfunc' })
}
// 建立 WebAssembly 例項
return new WebAssembly.Instance(module,imports)
})
}
//呼叫
loadWebAssembly('./math.wasm')
.then(instance => {
const add = instance.exports._add//取出c裡面的方法
const square = instance.exports._square//取出c裡面的方法
console.log('10 + 20 =',add(10,20))
console.log('3*3 =',square(3))
console.log('(2 + 5)*2 =',square(add(2 + 5)))
})
</script>
</body>
</html>我這裡的路徑math.html和math.wasm是同級的
現在就可以開啟瀏覽器查看了 但是fetch方法在本地是不能使用的它是網路請求 所有這裡需要來個web伺服器
開啟終端之間鍵入 npm install -g serve
下載web伺服器
然後serve . 啟動
有點的 .
啟動完成效果:
然後通過web伺服器訪問就能看到呼叫c方法後的計算結果:
到此這篇關於關於WebAssembly編譯出來的.wasm檔案js如何呼叫的文章就介紹到這了,更多相關js呼叫.wasm檔案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！