js怎么调用wasm_JS如何调用WebAssembly编译出来的.wasm文件

WebAssembly也叫浏览器字节码技术 这里就不过多的解释了网上很多介绍xiG免费资源网

主要是让大家知道在js里面如何调用执行它，我之前看WebAssemblyAPI时候反正是看得一脸懵逼xiG免费资源网

也是为了大家能更快的入手这个比较新的技术吧xiG免费资源网

这边写的一个dom是官方推荐的c/c++编译的xiG免费资源网

c代码xiG免费资源网

int add (int x, int y) {

return x + y;

}

int square (int x) {

return x * x;

}

属性c但是对字节码不熟悉的朋友可能会不理解，为什么没有main函数xiG免费资源网

这里主要是把这个c代码当成一个模块调用不需要它自己执行所以没有，官方也有有main函数的能直接生成js和html但是太过雍于，xiG免费资源网

这种方式比较推荐，也是让js能直接调用比较方便xiG免费资源网

之后使用 emscripten进行编译 emcc math.c -Os -s WASM=1 -s SIDE_MODULE=1 -o math.wasmxiG免费资源网

然后就有math.wasm文件了，如果没装emscripten的话我博客里面有一篇是关于安装的xiG免费资源网

有了math.wasm文件后就该用js调用它了xiG免费资源网

新建math.html加入调用的方法如下：xiG免费资源网

Document

/**

* @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)))

})

我这里的路径math.html和math.wasm是同级的xiG免费资源网

现在就可以打开浏览器查看了 但是fetch方法在本地是不能使用的它是网络请求 所有这里需要来个web服务器xiG免费资源网

打开终端之间键入 npm install -g servexiG免费资源网

下载web服务器xiG免费资源网

然后serve . 启动xiG免费资源网

有点的 .xiG免费资源网

启动完成效果:xiG免费资源网

xiG免费资源网

然后通过web服务器访问就能看到调用c方法后的计算结果:xiG免费资源网

xiG免费资源网