javascript 调用WebAssembly的方法
javascript 调用WebAssembly的方法
1 windows下安装emscripten
# 1.克隆emsdk git clone https://github.com/juj/emsdk.git # 2.进入emsdk文件夹 cd emsdk # 3.更新emsdk 这里使用是git所以运行时会提示使用"git pull" ./emsdk update git pull # 4.安装最新的emsdk 并配置全局的环境变量 这个地方要FQ 而且下载速度很慢 慢慢等吧 大概30分钟 ./emsdk install --global latest # 5.激活 ./emsdk activate latest # 6.应用环境变量(这个地方要注意 用cmd打开目录 执行 每次执行emcc 都要执行一下 ./emsdk_env.bat
emcc math.c -Os -s WASM=1 -s SIDE_MODULE=1 -o math.wasm
int add (int x, int y) {
return x + y;
}
int square (int x) {
return x * x;
}c语言代码如上
<!DOCTYPE html>
<html >
<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('/moban/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>经过验证微信H5支持