首页 > 其他分享 >wasm 学习笔记,写个求和demo

wasm 学习笔记,写个求和demo

时间:2024-03-20 11:47:08浏览次数:28  
标签:WebAssembly 写个 函数 文件 demo JavaScript add wasm

最近由于工作内容需要,正好学习了一下wasm(WebAssembly 的缩写)。下面通过一个例子说明如何使用:

c++ 写的方法打包成wasm文件后,js如何调用里面方法:

要将C++ 写好的方法打包成 wasm 文件,并在 JavaScript 中调用其中的方法,可以按照以下步骤进行:

  1. 首先,使用 Emscripten 工具链将 C++ 代码编译成 wasm 文件。Emscripten 是一个常用的工具,可以将 C/C++ 代码编译成 WebAssembly 格式。你可以访问 Emscripten 的官方网站获取更多信息和文档:https://emscripten.org/

  2. 在 JavaScript 中,可以使用 WebAssembly JavaScript API 来加载和调用 wasm 文件中的函数。你可以使用 WebAssembly.instantiateStreamingWebAssembly.instantiate 方法来加载 wasm 文件,并获取其中导出的函数。

  3. 在 JavaScript 中调用 wasm 文件中的函数,可以通过获取导出的函数对象,并直接调用这些函数来实现。

下面是一个简单的示例代码演示如何加载 wasm 文件并调用其中的函数:

// example.cpp文件
#include <emscripten/emscripten.h>

extern "C" {
    EMSCRIPTEN_KEEPALIVE
    int add(int a, int b) {
        return a + b;
    }
}

在这个示例中,定义了一个简单的 add 函数,用于计算两个整数的和。使用 EMSCRIPTEN_KEEPALIVE 宏来告诉 Emscripten 将该函数导出到 wasm 模块中,以便 JavaScript 可以调用它。

接下来使用 Emscripten 工具链将这个 C++ 代码编译成 wasm 文件。使用类似以下命令来进行编译:

emcc example.cpp  -o example.js -s EXPORTED_FUNCTIONS="['_add']"

在这个命令中,example.cpp C++ 源文件,example.js是输出的 JavaScript 文件,_add 是要导出的函数名称。

完成编译后,将得到一个包含 wasm 模块的 JavaScript 文件,可以在你的 HTML 文件中引入并调用其中的函数。

// index.html文件
<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly Demo</title>
</head>
<body>
    <script>
        fetch('./example.wasm')
            .then(response => response.arrayBuffer())
            .then(bytes => WebAssembly.instantiate(bytes, {}))
            .then(results => {
                const { add } = results.instance.exports;
                const sum = add(5, 6);
                console.log('Sum:', sum); //浏览器控制台会打印出11
            });
    </script>
</body>
</html>

add是在 C++ 代码中导出的函数名称。

参考链接:https://juejin.cn/post/7259182371974266936?searchId=202403181758005AB9851DB9A8A52DF80C

标签:WebAssembly,写个,函数,文件,demo,JavaScript,add,wasm
From: https://www.cnblogs.com/imsomnus/p/18084888

相关文章

  • Android实现手电筒demo
    需求:做一个手电筒APK,要求如下:   1:手电筒应用打开后需要有具体的界面打开和关闭按钮。按Home,Recent键保持长亮,按 Back键关闭   2:手电筒的状态必须和下拉栏的手电筒状态一致   3:手电筒打开和关闭,需要有一个弹框提醒用户确认或者取消,弹框风格请自定义vi......
  • robot_sim_demo: Cannot locate rosdep definition for [yocs_cmd_vel_mux]
    提纲1、问题描述2、解决方法3、原因分析1、问题描述下载了ROS-Academy-for-Beginners后,开始用rosdep安装依赖,但是发现执行官方文档提供的依赖安装命令:rosdepinstall--from-pathssrc--ignore-src--rosdistro=kinetic-y,后出现了错误,如下所示:zzl@zzl-virtual-machine:~......
  • python selenium Demo
    importtimefromseleniumimportwebdriverfromselenium.webdriver.chrome.optionsimportOptionsfromselenium.webdriver.common.byimportBy#自动下载驱动fromwebdriver_helperimportget_webdriver#创建一个参数对象,用来控制chrome以无界面模式打开(可以视为固......
  • Gitlab+Jenkins+Docker+Harbor+K8s集群搭建CICD平台(持续集成部署Hexo博客Demo)
    目录涉及内容:一、CICD服务器环境搭建1、docker环境安装(1)、拉取镜像,启动并设置开机自启(2)、配置docker加速器2、安装并配置GitLab(1)、创建共享卷目录(2)、创建gitlab容器(3)、关闭容器修改配置文件(4)、修改完配置文件之后。直接启动容器(5)、相关的git命令(针对已存在的文件夹)3、安装配......
  • 通讯框架 t-io 学习——给初学者的Demo:ShowCase设计分析
    前言最近闲暇时间研究Springboot,正好需要用到即时通讯部分了,虽然springboot有websocket,但是我还是看中了t-io框架。看了部分源代码和示例,先把helloworld敲了一遍,又把showcase代码敲了一遍,决定做一个总结。本篇文章并不会解释T-io是如何通讯的,而是从showcase这个给t-io初学......
  • 详细分析Mysql中的LOCATE函数(附Demo)
    目录1.基本概念2.Demo3.实战1.基本概念LOCATE()函数在SQL中用于在字符串中查找子字符串的位置它的一般语法如下:LOCATE(substring,string,start)LOCATE()函数返回子字符串在主字符串中第一次出现的位置如果未找到子字符串,则返回0具体的参数如下:substring......
  • C# danbooru Stable Diffusion 提示词反推 Onnx Demo
    目录说明效果模型信息项目代码下载 C#danbooruStableDiffusion提示词反推OnnxDemo说明模型下载地址:https://huggingface.co/deepghs/ml-danbooru-onnx效果模型信息Model Properties-----------------------------------------------------------------......
  • C# RAM Stable Diffusion 提示词反推 Onnx Demo
    目录介绍效果模型信息项目代码下载C#RAMStableDiffusion提示词反推OnnxDemo介绍github地址:https://github.com/xinyu1205/recognize-anythingOpen-sourceandstrongfoundationimagerecognitionmodels.onnx模型下载地址:https://huggingface.co/CannotFi......
  • .Net 创建webhooks Demo,可用于Gitlab等Workflow
    框架:.Net6、webapipackage:GitLabApiClient定义body参数DTO,不同event有不同的参数,具体可参考gitlab文档:https://docs.gitlab.com/ee/user/project/integrations/webhook_events.htmlpublicclassGitLabWebhookData{publicstringRef{get;set;}publicstring......
  • 常见问题解决 --- 海康OpenAPI安全认证库的demo运行报错
    我要开发一个对接海康isc平台的oss的api,发现需要有海康登录库和ak、sk的配合才能完成。在海康官方下载OpenAPI安全认证库(JAVA)V1.1.11,解压后用idea打开demo发现一对报错。解决办法:1.修复基本的错误。比如包名报错,应该是  packagega; 2.修复maven依赖导入报错。首先是artem......