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 相关文章推荐
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
JS实现拖动示例代码
Nov 01 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
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获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
python2.7实现FTP文件下载功能
2018/04/15 Python
Python判断有效的数独算法示例
2019/02/23 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
django的ORM操作 增加和查询
2019/07/26 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
Django 解决由save方法引发的错误
2020/05/21 Python
Keras实现DenseNet结构操作
2020/07/06 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
物业保安主管岗位职责
2013/12/25 职场文书
五水共治捐款倡议书
2014/05/14 职场文书
职务任命书范本
2014/06/05 职场文书
六查六看心得体会
2014/10/14 职场文书
2015年化验室工作总结
2015/04/23 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
英语投诉信范文
2015/07/03 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书