C/C++编译成.wasm文件，并使用javascript调用接口

最新推荐文章于 2024-05-25 17:58:54 发布
最新推荐文章于 2024-05-25 17:58:54 发布
阅读量7k 收藏 19
点赞数 3
文章标签： c语言 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46439030/article/details/106365076
版权
本文介绍了如何利用WebAssembly Studio将C/C++代码编译为.wasm文件，并在JavaScript中加载和调用接口。首先，删除不必要的main.js和main.html，然后在C代码中添加函数声明。通过修改输入输出文件名并保存，即可编译生成.wasm。接着，下载生成的.wasm文件并在JavaScript中进行测试，如果遇到问题，可能需要调整加载方式。
摘要由CSDN通过智能技术生成

一、C/C++编译成.wasm

0.背景

准备好本地编译环境Emscripten，使用emcc命令编译的.wasm文件在js里面调用时报这个错误：

CompileError: Wasm decoding failedResult = expected magic word 00 61 73 6d, found 42 43 c0 ……

没找到处理办法，但是找到了一种更简单的方法–使用WebAssembly Studio在线编译。

1、如果只是需要一个.wasm文件，创建Empty C Project

在这里插入图片描述

2、main.js和main.html也可以删除

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DYrmhl1D-1590498410522)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1590496699150.png)]

3、在main.c中编写c代码，注意每一个函数上面需要加WASM_EXPORT

在这里插入图片描述

4、可以右键edit更改输入、输出文件名称，但是注意build.ts文件输入、输出文件需要同步

在这里插入图片描述
在这里插入图片描述

5、最后注意保存文件！再build就编译生成了.wasm文件

在这里插入图片描述
在这里插入图片描述

二、javascript加载.wasm文件，调用接口

1、右键刚刚生成的.wasm文件download下载

在这里插入图片描述

2、测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"
最低0.47元/天 解锁文章
乌龟core
关注
Wasm(WebAssembly) 编译环境搭建、浏览器调用
Shinobi_Jack的博客
08-01 448
安装过程中，确保选中了“Add Node.js to PATH”选项，这样可以在任何地方通过命令行访问Node.js和npm。点击“Download”按钮，选择Windows版本（32位或64位）。访问Node.js官方网站：https://nodejs.org/因此，需要将test.html放到本地服务器或在线服务器中访问。运行测试node node_test.js 参数（数字）编写node_test.js文件。3）在node中调用wasm。5）.设置到环境变量、验证。4）在浏览器中调用wasm。
WebAssembly编译之(3)-WASM编译实战之C/C++导出asm.js及wasm库
youlinhuanyan的博客
01-28 3513
c/c++导出asm.js/wasm库，实现javascirpt对c/c++函数、类、对象的调用
dotnet 将C#编译为wasm让前端html使用
dotNET跨平台
01-11 3661
其实 dotnet 是全栈的首选，原因是因为可以开发的方向太多，比如大本营PC端，以及后台。还有移动端，包括 IOS 和安卓端。现在还能用来写前端，本文就来告诉大家如何在前端使用现有的C...
webassembly WASM入门：将c++编译为wasm并运行
ResumeProject的博客
08-21 4133
WASM的优点是，通过使用比等效的JavaScript代码低得多的程序表示形式（二进制格式），它的运行速度要快得多，从而实现接近本机的性能。点击下载得到.wasm文件。然后编译为对象，即可调用对象中的方法。
C文件编译wasm
为人类进化与传承而奋斗！
05-12 1780
1、下载安装emsdk git clone https://github.com/juj/emsdk.git // 或者码云 git clone https://gitee.com/slightDegree/emsdk.git // 安装，因为网络问题会经常失败，多试几次就好，或者手动下载一下再继续尝试，已经下载完成的会跳过 E:\emscripten\emsdk>emsdk install latest // 安装完成后激活 E:\emscripten\emsdk>emsdk
WebAssembly 入门教程 c++、go、python编译wasm
m0_61634551的博客
05-04 3145
WebAssembly 是一种新的编码方式，可以在现代的网络浏览器中运行。它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如 C/C ++ 等语言提供一个编译目标，以便它们可以在 Web 上运行。它也被设计为可以与 JavaScript 共存，允许两者一起工作。WebAssembly 提供了一条途径，使得以各种语言编写的代码都可以以接近原生的速度在 Web 中运行。WebAssembly 设计初衷。
C语言与WebAssembly：C源码编译为WASM、与JavaScript交互与优化（三）
weixin_56154577的博客
04-24 928
C语言与WebAssembly的结合为构建高性能、低延迟的Web应用提供了新的解决方案。这一技术组合不仅提升了Web应用的性能边界，还极大拓展了Web开发的可能性，使Web平台能够承载更复杂、更专业化的应用程序。因此，我们鼓励开发者积极探索和利用这一技术组合，以应对未来Web应用日益增长的性能需求和跨平台挑战。
C++ wasm 使用教程
最新发布
一个大佬的博客
05-25 671
id−u。
把两个C++项目编译成wasm
宇联舟的博客
08-30 1169
C++项目编译成wasm
前端 ffmpeg.wasm 网页（DEMO）
01-23
`ffmpeg.wasm`是FFmpeg库与WebAssembly结合的产物，它通过将FFmpeg的源代码编译成WASM模块，使开发者能够在JavaScript中调用FFmpeg的功能。用户在网页上加载`ffmpeg.wasm`后，JavaScript可以通过WebAssembly接口与...
2048.wasm:用C编写并编译为WebAssembly的2048
03-05
2048.wasm 用C编写并编译为WebAssembly的2048 玩 使用箭头键（ᐊᐅᐃᐁ）滑动瓷砖。 按n播放。 用法 编译C代码 $ cd src $ make game $ ./play 注意：确保将适当的路径添加到Makefile下的SDL2标头和库。 通过emscripten将C代码编译为WASM $ emcc -s WASM=1 -s USE_SDL=2 -s USE_SDL_TTF=2 --preload-file src/Nunito-ExtraBold.ttf -O3 -I include -L lib src/main.c -o docs/2048.js 但为什么？ 为什么不？ 以此作为实验； 这只是300行真正可怜的C代码，这些代码永远被编译为wasm（rip sdl字体）。
wasm_arm-devkit:编译wasm_arm的C ++代码
04-04
wasm_arm-devkit wasm_arm： //ryubai.com/e/wasm_arm 这是为wasm_arm编译C ++代码的演示。 它具有1MB的用户/系统模式堆栈，彼此对应的4KB模式堆栈和1MB的堆空间。 将十六进制内容从./build/app.bin复制到Data string textarea或仅单击Load * .bin File按钮。 依赖关系： arm-none-eabi-gcc，切记在makefile中编辑COMPILER_DIR。
holyc：易于使用的C ++ WASM编译器（高度实验）
01-28
神圣的 安装 npm install -g holyc 第一次安装将很慢。 C ++的用法 holyc++ path/to/something.cpp 然后，可以在something.cpp.wasm获得WASM二进制文件。 选件 名称 描述 --show-wast 显示浪费的输出 --no-clean 禁用中间格式的清洁 常问问题 与Emscripten相比如何 Emscripten能够编译Holyc无法编译的libc。 您可以通过遵循轻松地重现此基准。 你好ç： int main () { return 0 ; } 文字： 文件 大小（字节） 你好 21856 hello.js（加载程序） 99710 Holyc： 文件 大小（字节） 你好 78 hello.js（加载程序） 目前未知（请参阅以获取提示）
wasm使用vs2022编译
05-26
使用 VS2022 编译 WASM 需要经过多个步骤，包括编写 C++ 代码、使用 cmake-converter 生成 CMakeLists.txt 文件、编译生成 WASM 文件，并解决核心问题。但是，通过这些步骤，我们可以将 C++ 代码移植到 Web 平台上，...
WebAssembly编译之(4)-WASM编译进阶(多文件、多接口)
youlinhuanyan的博客
02-01 2083
Wasm编译进阶，C/C++导出函数、导出类
技术指南 | 手把手教你Wasm合约开发（C++篇）
ontologycoding
08-28 3178
Ontology Wasm自从上线测试网以来便受到了社区开发人员的极大关注。Ontology Wasm 的上线将使得业务逻辑复杂的 dApp 合约上链成本降低，极大丰富 dApp 生态。在进行 Ontology Wasm 合约开发时，开发者不仅可以使用 Rust，还可以使用 C++ 作为合约开发语言。本期我们将通过两个简单的示例来示范如何使用 C++ 进行Ontology Wasm 合约开发...
【备忘干货】c/c++ (wasm)和js互相调用记录
haohaohaihuai的博客
12-04 1458
通过本文可对wasm使用过程有一个初步的了解， 但还有很多功能尚未尝试。例如：前面提到的embind和WebIDL Binder， ccall， cwrap等等。还有一个有趣的东东Qt for WebAssembly，可以把Qt的东西在浏览器上跑包括GUI程序。
Emscripten + CMakeLists.txt 将 C++ 项目编译成 WebAssembly(.wasm)/js，并编译 Html 测试
AlanWang4523
10-31 3784
上篇文章已讲解如何安装配置 Emscripten 环境。本篇文章主要讲解如何将基于 CMakeLists 配置的 C++ 项目编译成 WebAssembly 库来供 Web 前端使用。编译结果会生成 .wasm、.js，测试代码会生成 .wasm、.js、.html。
WASM模块文件是什么？
05-27
WASM（WebAssembly）模块是一种二进制格式的代码，它可以在Web浏览器中运行，这使得在Web浏览器中使用C/C++等语言编写的高性能代码成为可能。WASM模块文件包含预编译的机器代码，可以通过JavaScript在Web浏览器中动态加载和运行。在机器代码中，WASM模块使用基于栈的虚拟机，这使得运行时性能非常高。 在使用TensorFlow.js中的tfjs-tflite库时，WASM模块文件被用来实现TFLite模型的推断部分。这些WASM模块文件是通过Emscripten编译器从C/C++代码生成的，然后使用JavaScript包装器调用。默认情况下，tfjs-tflite库会在"dist/"文件夹中查找WASM模块文件。因此，我们需要确保我们已经加载了tf-tflite.min.js文件，以便它可以从默认位置（dist/）定位WASM模块文件。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值