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


Posted in Javascript onNovember 05, 2020

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 . 启动

有点的 .

启动完成效果:

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

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

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

到此这篇关于关于WebAssembly编译出来的.wasm文件js如何调用的文章就介绍到这了,更多相关js调用.wasm文件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript使用concat连接数组的方法
Apr 06 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
Vue 中的compile操作方法
Feb 26 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 #Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 #Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 #Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 #Javascript
nuxt引入组件和公共样式的操作
Nov 05 #Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 #jQuery
nuxt 实现在其它js文件中使用store的方式
Nov 05 #Javascript
You might like
php执行sql语句的写法
2009/03/10 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
javascript 函数式编程
2007/08/16 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
Python正则表达式介绍
2012/08/06 Python
Python ZipFile模块详解
2013/11/01 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
python ddt实现数据驱动
2018/03/14 Python
python获取中文字符串长度的方法
2018/11/14 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
信息专业学生学习的自我评价
2014/02/17 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
法律意见书范文
2015/06/04 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL