wasm 在web中最小胶水代码; 报错Imports argument must be present and must be an object

加载和运行 WebAssembly 代码 我试过了没成功,代码裁剪有点严重

加载WebAssembly的两个新的API

新的 WebAssembly.compileStreaming/WebAssembly.instantiateStreaming 方法更加高效——它们直接在来自网络的原始字节流上执行操作,省去了 ArrayBuffer 步骤。

老的 WebAssembly.compile/WebAssembly.instantiate 方法要求你在获取原始字节之后创建一个包含了你的 WebAssembly 模块二进制的 ArrayBuffer,然后编译/实例化它。这类似于 new Function(string),只不过我们用字节数组缓冲区(WebAssembly 源码)替换了字符串(JavaScript 源码)。

调用时候的报错
在这里插入图片描述

环境是vite启动的服务

axios({url: '/test.wasm', // 拷贝文件到publicmethod: 'get',responseType: 'stream' // 响应返回stream的类型
}).then(async (res) => {
// WebAssembly.instantiateStreaming()  介绍
// 函数直接从流式底层源编译并实例化 WebAssembly 模块。这是加载 Wasm 代码的最有效、最优化的方式。 const module = await WebAssembly.instantiateStreaming(res.data,// importObject // 需要这个对象但mdn 没有给出来)console.log(module.instance.exports)
})

在胶水代码中找到的

  var HEAP,
/** @type {!Int8Array} */HEAP8,
/** @type {!Uint8Array} */HEAPU8,
/** @type {!Int16Array} */HEAP16,
/** @type {!Uint16Array} */HEAPU16,
/** @type {!Int32Array} */HEAP32,
/** @type {!Uint32Array} */HEAPU32,
/** @type {!Float32Array} */HEAPF32,
/** @type {!Float64Array} */HEAPF64;
function _emscripten_memcpy_big(dest, src, num) {HEAPU8.copyWithin(dest, src, src + num);
}function _fd_write(fd, iov, iovcnt, pnum) {// hack to support printf in SYSCALLS_REQUIRE_FILESYSTEM=0var num = 0;for (var i = 0; i < iovcnt; i++) {var ptr = HEAPU32[((iov)>>2)];var len = HEAPU32[(((iov)+(4))>>2)];iov += 8;for (var j = 0; j < len; j++) {printChar(fd, HEAPU8[ptr+j]);}num += len;}HEAPU32[((pnum)>>2)] = num;return 0;}var wasmImports = {"emscripten_memcpy_big": _emscripten_memcpy_big,"fd_write": _fd_write
};
var info = {'env': wasmImports,'wasi_snapshot_preview1': wasmImports,};const module = WebAssembly.instantiateStreaming(fetch('/test.wasm'),info).then(res=>{console.log(res)
})

_fd_write函数某个工具给出来的解释参考 感觉就是提取wasm里的被导出来的函数吧

这段代码是一个低级函数,其目的是模拟文件描述符(fd)上的写操作。这是通过遍历输入的iov(即输入的“I/O向量”)数组,并将其内容写入文件描述符fd来实现的。
让我们详细地分析一下这段代码:
iov 是一个指针,指向一个包含多个iovec结构的数组。每个iovec结构包含两个成员:一个指向数据的指针和该数据的长度。
iovcnt 是iov数组中的元素数量。
_fd_write 函数遍历iov数组,处理每个iovec,并将其内容写入文件描述符fd。
对于每个iovec,它首先获取数据的指针(即内存地址)和长度。然后,它使用这些信息从内存中读取数据,并将其逐个字符地写入文件描述符。
函数最后将写入的字符数存储在pnum指向的位置。
函数返回0,表示写操作成功完成。
注意:这个代码片段是用JavaScript写的,并且可能是模拟或模拟器的一部分,特别是针对系统级编程或低级编程。
另外,这段代码似乎是从更大的上下文中提取出来的,因为它引用了几个变量(如 HEAPU8 和 HEAPU32),这些变量在给定的代码片段中没有定义。这些变量可能是指向特定类型数组的指针,这些数组用于模拟系统级别的数据结构或内存布局。

控制台成功打印出对象包含了我导出的int_sqrt、main

运行成功导出的两个函数 main 和int_sqrt
较完整的代码

<script setup>
// import axios from 'axios';  // 用axios 请求的方式也可以
import { onMounted } from 'vue';onMounted(async ()=>{var HEAP,
/** @type {!Int8Array} */HEAP8,
/** @type {!Uint8Array} */HEAPU8,
/** @type {!Int16Array} */HEAP16,
/** @type {!Uint16Array} */HEAPU16,
/** @type {!Int32Array} */HEAP32,
/** @type {!Uint32Array} */HEAPU32,
/** @type {!Float32Array} */HEAPF32,
/** @type {!Float64Array} */HEAPF64;
function _emscripten_memcpy_big(dest, src, num) {HEAPU8.copyWithin(dest, src, src + num);
}function _fd_write(fd, iov, iovcnt, pnum) {// hack to support printf in SYSCALLS_REQUIRE_FILESYSTEM=0var num = 0;for (var i = 0; i < iovcnt; i++) {var ptr = HEAPU32[((iov)>>2)];var len = HEAPU32[(((iov)+(4))>>2)];iov += 8;for (var j = 0; j < len; j++) {printChar(fd, HEAPU8[ptr+j]);}num += len;}HEAPU32[((pnum)>>2)] = num;return 0;}var wasmImports = {"emscripten_memcpy_big": _emscripten_memcpy_big,"fd_write": _fd_write
};
var info = {'env': wasmImports,'wasi_snapshot_preview1': wasmImports,};const module = await WebAssembly.instantiateStreaming(fetch('/test.wasm'),info).then(res=>{console.log(res)// console.log(res.instance.exports.int_sqrt(33)) 可以调用// res.instance.exports.main() // 不知道为什么main 函数调用不了})})
</script><template></template>

Emscripten胶水代码初探

 // 别人代码给的一点启发 https://blog.csdn.net/wopelo/article/details/121597551// const importObject = {//       env: {//           // 需要提供一个中止函数,如果断言失败就会调用这个中止函数//           abort(_msg, _file, line, column) {//               console.error('abort called at index.ts:' + line + ':' + column)//           }//       },//       wasi_snapshot_preview1: wasmImports//   }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/449484.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式学习笔记04(小滴课堂)

1.创建基础类&#xff1a; 调用它进行类对象的复制&#xff1a; 但是如果属性都是基本数据类型确实像这样很简单&#xff0c;但是如果属性中也包含复杂的数据类型呢&#xff1f; 再去测试一下&#xff1a; 我们发现person1和person2的list属性值的内容是同步的&#xff0c;这显…

网盘下载加速小妙招

平时使用百度网盘下载文件网速可能很慢也就一百多kb 甚至还达不到&#xff0c;在网盘的设置里面设置一下&#xff0c;网速能提高不少&#xff0c;具体多少不好评估&#xff0c;我设置了最高能到4M&#xff0c;下载就快多了 就是优化速率这个地方&#xff0c;这个功能默认是关闭…

Linux Rootkit实验|0201 基本功能之Root后门

Linux Rootkit实验&#xff5c;0201 基本功能之Root后门 11 May 2017 文章目录 Linux Rootkit实验&#xff5c;0201 基本功能之Root后门实验说明实验环境实验过程提供 root 后门 实验总结与思考参考资料参考资料 时人不识凌云木&#xff0c;直待凌云始道高。 实验说明 本次实…

如何使用VSCode上运行Jupyter,详细案例过程出可视化图

Python作为最受AI喜欢的语言之一&#xff0c;我们与大家共同学习下如何在VS Code上运行Jupyter&#xff0c;并且用简单案例实现出图。 环境 VS Code version: 1.80.1 Python: 3.12.0 小白安装过程&#xff1a; 在准备好基础环境&#xff0c;小白心想&#xff0c;AI可是霸占科…

Unity_使用Shader实现玻璃和镜面效果

效果图如下&#xff1a; 玻璃效果图 镜面效果图 Step1 搭建场景→镜子使用Quad代替&#xff0c;放置在需要反射的墙面→创建新的材质和Shader Step2 墙壁外创建Camera&#xff0c;用来渲染物体后方的视图→创建RenderTexture&#xff0c;赋于该相机 Step3 Shader的编写如下…

Docker极速入门掌握基本概念和用法

1、Docker概念 1.1什么是docker Docker是一个快速交付应用、运行应用的技术&#xff0c;具备以下优势 可将程序及其依赖、运行环境一起打包为一个镜像&#xff0c;可以迁移到任意Linux操作系统运行时利用沙箱机制形成隔离容器&#xff0c;各个应用互不干扰启动、移除都可以通…

了解野指针与assert断言 拿捏指针的使用!

目录 1.野指针 野指针的成因&#xff1a; 2.规避野指针 3.assert断言 创作不易&#xff0c;宝子们&#xff01;如果这篇文章对你们有帮助的话&#xff0c;别忘了给个免费的赞哟~ 1.野指针 概念&#xff1a;野指针就是指针指向的位置是不可知的&#xff08;随机的、不正确的…

零基础学Python(6)— 运算符

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。运算符是一种用于执行特定操作的符号或关键字。在编程中&#xff0c;运算符用于对变量、常量和表达式进行操作&#xff0c;以产生一个结果。下面将详细介绍Python语言中常见的运算符&#xff01;~&#x1f308; 目录 &a…

关于爬取所有哔哩哔哩、任意图片、所有音乐、的python脚本语言-Edge浏览器插件 全是干货!

这些都是现成的并且实时更新的&#xff01;从次解放双手&#xff01; 首先有自己的edge浏览器基本上都有并且找到插件选项 1.哔哩哔哩视频下载助手&#xff08;爬取哔哩哔哩视频&#xff09; bilibili哔哩哔哩视频下载助手 - Microsoft Edge Addons 下面是效果&#xff1a; 2.图…

2024美赛数学建模B题思路分析 - 搜索潜水器

# 1 赛题 问题B&#xff1a;搜索潜水器 总部位于希腊的小型海上巡航潜艇&#xff08;MCMS&#xff09;公司&#xff0c;制造能够将人类运送到海洋最深处的潜水器。潜水器被移动到该位置&#xff0c;并不受主船的束缚。MCMS现在希望用他们的潜水器带游客在爱奥尼亚海底探险&…

(N-142)基于springboot,vue停车场管理系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 项目采用前后端分离 前端技术&#xff1a;vueelementUI 服务端技术&#xff1a;springbootmybatis-plus 本项目分为普通用户和管理员…

[每周一更]-(第86期):NLP-实战操作-文本分类

NLP文本分类的应用场景 医疗领域 - 病历自动摘要&#xff1a; 应用&#xff1a; 利用NLP技术从医疗文档中自动生成病历摘要&#xff0c;以帮助医生更快速地了解患者的状况。 法律领域 - 法律文件分类&#xff1a; 应用&#xff1a; 使用文本分类技术自动分类法律文件&#xf…