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

WebAssembly 同时被 3 个专栏收录
1 篇文章 0 订阅
2 篇文章 0 订阅
2 篇文章 0 订阅

c代码

char* toChar (char* str) {
	return str;
}
int add (int x, int y) {
  return x + y;
}

int square (int x) {
  return x * x;
}

然后执行

emcc hello.c -Os -s WASM=1 -s SIDE_MODULE=1 -o hello.wasm

编译出wasm文件

新建hello.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)
            })
  }
  // 加载wasm文件
  loadWebAssembly('hello.wasm')
          .then(instance => {
            //调用c里面的方法
            const toChar = instance.exports.toChar
            const add = instance.exports.add 
            const square = instance.exports.square 
            
            console.log('return:   ', toChar("12352324"))
            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>

最后运行结果是

return: 12352324  

10 + 20 = 30  

3*3 = 9  

(2 + 5)*2 = 49

 

编译cpp文件 通过js调用wasm

#ifdef __cplusplus
extern "C"{
#endif
    char* toChar (char* str) {
        char * ch = str;
    	return str;
    }
    int   add (int x, int y) {
      return x + y;
    }

    int   square (int x) {
      return x * x;
    }

#ifdef __cplusplus
}
#endif

执行

em++ main.cpp -o main.html -s EXPORTED_FUNCTIONS="['_square','_add','_toChar']" -s WASM=1

index.html

<!doctype html>  
<html lang="en-us">  
  <head>  
    <meta charset="utf-8">  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <title>js调用cpp函数例子</title>  
  </head>  
  <body>
    <button onclick="run2()" >直接调用</button>
    <div id="log">  
    </div>  
    <script type='text/javascript'>
      function run2()
      {
        console.log("============toChar"+_toChar("1223232"))
        console.log("============add"+_add(14,2))
        console.log("============square"+_square(2))
      }  
    </script>  
    <script async type="text/javascript" src="main.js"></script>  
  </body>  
</html> 

运行结果

============toChar1223232 

============add16  

============square4

  • 0
    点赞
  • 1
    评论
  • 5
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏作者

wangxuan19922

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值