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 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('/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支持

posted @ 2020-11-05 09:17  newmiracle宇宙  阅读(1191)  评论(0)  编辑  收藏  举报