当前位置: 首页 > news >正文

Emscripten + CMakeLists.txt 将 C++ 项目编译成 WebAssembly(.wasm)/js,并编译 Html 测试

背景:Web 端需要使用已有的 C++ 库(使用 CMake 编译),需要将 C++ 项目编译成 WebAssembly(.wasm) 供 js 调用。

上篇文章《Mac 上安装 Emscripten》 已讲解如何安装配置 Emscripten 环境。

本篇文章主要讲解如何将基于 CMakeLists 配置的 C++ 项目编译成 WebAssembly 库来供 Web 前端使用。编译结果会生成 .wasm、.js,测试代码会生成 .wasm、.js、.html。

一、构建基于 CMakeList 的 C++ 库及测试 Demo 工程

目录结构如下:

比如 test_lib 就是我们原有的 C++ 库,这里测试简单写了个数学库,包含加法函数和减法函数。我们最终需要提供 libtest_lib.wasm 前端同学用。main.cpp 是自己用来测试 libtest_lib.wasm 的。所有涉及的代码及编译脚本在本文末尾。

二、编译项目库及测试 Demo

执行脚本 ./build_web.sh 记得给执行权限:chmod +x build_web.sh
脚本主要执行以下操作:

emcmake cmake -B build/web
emmake make
emcc libtest_lib.a -o libtest_lib.js

编译输出结果如下:
在这里插入图片描述

输出的 test_lib 库,在 cmake_demo/build/libs/web 目录下

输出的测试 demo,在 cmake_demo/build/web 目录下

三、测试

3.1 启动 Server

要在本地浏览器测试 .wasm 需要启动 server,否则报错,具体原因上篇文章《Mac 上安装 Emscripten》 有说明。

进入到 cmake_demo/build/web 所在目录执行 python -m http.server 9090 启动服务。

3.2 在浏览器测试

在浏览器地址栏输入:

http://localhost:9090/test_main.html

可以看到如下结果:
与 main.cpp 里的函数调用预期结果一致。

四、所有涉及的代码及编译脚本

math_test.h 代码如下:
只有两个函数:test_add、test_sub

/*** Author: AlanWang4523.* Date: 2023/10/31 16:08.* Mail: alanwang4523@gmail.com*/#ifndef CMAKEDEMO_MATH_TEST_H
#define CMAKEDEMO_MATH_TEST_H#ifdef __cplusplus
extern "C" {
#endifint test_add(int a, int b);
int test_sub(int a, int b);#ifdef __cplusplus
}
#endif#endif //CMAKEDEMO_MATH_TEST_H

math_test.cpp 代码如下:

/*** Author: AlanWang4523.* Date: 2023/10/31 16:08.* Mail: alanwang4523@gmail.com*/#include "math_test.h"#ifdef __cplusplus
extern "C" {
#endifint test_add(int a, int b) {return a + b;
}int test_sub(int a, int b) {return a - b;
}#ifdef __cplusplus
}
#endif

test_lib/CMakeLists.txt 代码如下:

include_directories(./)
include_directories(inc)
AUX_SOURCE_DIRECTORY(src DIR_TONE_CHANGE_SRCS)
add_library(test_lib ${DIR_TONE_CHANGE_SRCS})

math.cpp 代码如下:

#include <iostream>
#include "test_lib/inc/math_test.h"int main(int argc, const char * argv[]) {std::cout << "Hello AlanWang4523\n";int ret = test_add(1, 2);std::cout << "test_add: 1 + 2 = " << ret << "\n" ;ret = test_sub(3, 2);std::cout << "test_sub: 3 - 2 = " << ret << "\n" ;return 0;
}

CMakeLists.txt 代码如下:

cmake_minimum_required(VERSION 3.6)
project(test_main)
set(LIBRARY_OUTPUT_PATH ${PROJECT_SOURCE_DIR}/lib)
set(CMAKE_CXX_STANDARD 11)include_directories(./ test_lib test_lib/inc)
add_subdirectory(test_lib)set(CMAKE_EXECUTABLE_SUFFIX ".html") # 编译生成.htmladd_executable(test_main main.cpp)
target_link_libraries(test_main test_lib)

build_web.sh 编译脚本如下:

#!/bin/sh# @Time    : 2023-10-31 16:59
# @Author  : AlanWang
# @FileName: build_web.shOUTPUT_LIBS="./build/libs/web"function build_for_webassembly() {BUILD_DIR="./build/web"PRE_EXE_DIR=$(pwd)echo ${PRE_EXE_DIR}emcmake cmake \-H"./" \-B"${BUILD_DIR}" \-DCMAKE_LIBRARY_OUTPUT_DIRECTORY="./build/web/libs/" \-DCMAKE_BUILD_TYPE="Release"cd ${BUILD_DIR}emmake makecd ${PRE_EXE_DIR}mkdir -p ${OUTPUT_LIBS}/mv ${PRE_EXE_DIR}/lib/* ${OUTPUT_LIBS}/
#	rm -r ./build/webTARGET_NAME=""for file in $(ls ${OUTPUT_LIBS})doif [ "${file##*.}" == "a" ]; thenTARGET_NAME=${file%.*}breakfidoneecho "AlanTest::=====>>TARGET_NAME: ${TARGET_NAME}"emcc -s ALLOW_MEMORY_GROWTH=1 ${OUTPUT_LIBS}/${TARGET_NAME}.a -o ${OUTPUT_LIBS}/${TARGET_NAME}.js
}build_for_webassembly

相关文章:

Emscripten + CMakeLists.txt 将 C++ 项目编译成 WebAssembly(.wasm)/js,并编译 Html 测试

背景&#xff1a;Web 端需要使用已有的 C 库&#xff08;使用 CMake 编译&#xff09;&#xff0c;需要将 C 项目编译成 WebAssembly(.wasm) 供 js 调用。 上篇文章《Mac 上安装 Emscripten》 已讲解如何安装配置 Emscripten 环境。 本篇文章主要讲解如何将基于 CMakeLists 配…...

MATLAB中preparets函数用法

目录 语法 说明 示例 准备开环和闭环网络的数据 preparets函数的功能是为网络模拟或训练准备输入和目标时间序列数据 语法 [Xs,Xi,Ai,Ts,EWs,shift] preparets(net,Xnf,Tnf,Tf,EW) 说明 [Xs, Xi, Ai, Ts, EWs, shift] preparets(net, Xnf, Tnf, Tf, EW) 这个函数接受…...

ARM 版 OpenEuler 22.03 部署 KubeSphere v3.4.0 不完全指南续篇

作者&#xff1a;运维有术 前言 知识点 定级&#xff1a;入门级KubeKey 安装部署 ARM 版 KubeSphere 和 KubernetesARM 版 KubeSphere 和 Kubernetes 常见问题 实战服务器配置 (个人云上测试服务器) 主机名IPCPU内存系统盘数据盘用途ks-master-1172.16.33.1661650200KubeSp…...

react官网

应急方案 – React 中文文档 (docschina.org) 正版卡死版 Hooks FAQ – React (reactjs.org) 英文流畅版 应急方案 – React 中文网 (nodejs.cn) 盗版流畅版&#xff08;翻译有稍稍的问题&#xff09; http://www.react-cn.com/index.html 黄版...

前端css介绍

CSS介绍 CSS&#xff08;Cascading Style Sheet&#xff0c;层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表&#xff0c;它就会按照这个样式表来对文档进行格式化&#xff08;渲染&#xff09;。 CSS语法 CSS实例 每个CSS样式由两个组成部分&#xff1a;选择器和…...

MySql创建索引

在MySQL中&#xff0c;可以使用CREATE INDEX语句来创建索引。以下是创建索引的基本语法&#xff1a; CREATE INDEX index_name ON table_name (column1, column2, ...);其中&#xff0c;index_name是索引的名称&#xff0c;可以自定义&#xff08;也可以不指定索引名称&#x…...

前后端分离vue+springboot家庭理财账单财务管理系统

项目介绍&#xff1a; 该系统能够管理家庭收入支出&#xff0c;并且能直观得表现收支状态。主要功能包括用户管理、收支管理、财务管理、统计收支情况等功能。 技术栈&#xff1a; 后端&#xff1a; SpringBoot&#xff0c;Sa-Token&#xff0c;MyBatis-Plus&#xff0c;MyB…...

LeetCode:2003. 每棵子树内缺失的最小基因值(C++)

目录 2003. 每棵子树内缺失的最小基因值 题目描述&#xff1a; 实现代码与解析&#xff1a; dfs 启发式合并 原理思路&#xff1a; 2003. 每棵子树内缺失的最小基因值 题目描述&#xff1a; 有一棵根节点为 0 的 家族树 &#xff0c;总共包含 n 个节点&#xff0c;节点编…...

React Hooks之useContext使用

官方文档写道&#xff1a;在组件的顶层调用 useContext 来读取和订阅 context。 我理解就是一个“全局变量”的概念。它可以用来声明一个变量&#xff0c;然后在各个组件中使用&#xff0c;避免了props一级一级往下传&#xff0c;当然使用场景有限&#xff0c;比如设置一个主题…...

多模态对比语言图像预训练CLIP:打破语言与视觉的界限

项目设计集合&#xff08;人工智能方向&#xff09;&#xff1a;助力新人快速实战掌握技能、自主完成项目设计升级&#xff0c;提升自身的硬实力&#xff08;不仅限NLP、知识图谱、计算机视觉等领域&#xff09;&#xff1a;汇总有意义的项目设计集合&#xff0c;助力新人快速实…...

使用s3cmd访问S3存储 -【真实案例】

背景 项目中使用到了 S3 存储(基于华为云 OBS),并且在应用服务器上开通了到 S3 存储的防火墙。 👉 目标:在应用服务器上验证 S3 存储是否通畅可用。 👉 选型:经过分析,发现在 Linux 下可以使用 s3cmd 来访问 S3 存储。 s3cmd 简介 s3cmd 是一个开源免费的、基于 P…...

51单片机复位电容计算与分析(附带Proteus电路图)

因为iC x (dU/dt).在上电瞬间&#xff0c;U从0变化到U,所以这一瞬间就是通的&#xff0c;然后这就是一个直流回路&#xff0c;因为电容C直流中是断路的&#xff0c;所以就不通了。 然后来分析一下这个电容的电压到底是能不能达到单片机需要的复位电压。 这是一个线性电容&…...

前端性能瓶颈崩溃项目?Webpack助力解决!

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 ⭐ 专栏简介 &#x1f4d8; 文章引言 一、背…...

纷享销客BI,助力企业激活数据价值,科学企业决策

10月25日上午&#xff0c;国家数据局正式挂牌成立&#xff0c;这标志着我国数字经济发展将进入新的发展阶段&#xff0c;也将有力促进数据要素技术创新、开发利用和有效治理&#xff0c;以数据强国支撑数字中国的建设。伴随数据作为企业新的生产要素的意义不断凸显&#xff0c;…...

SpringBoot整合阿里云OSS对象存储

文章目录 1、OSS介绍及开通1.1、阿里云OSS简介1.2、开通OSS 2、创建存储空间bucket及密钥获取2.1、创建存储空间2.2、获取密钥 3、OSS快速入门案例4、在springboot项目中整合4.1、将oss配置放到yml文件中4.2、创建Oss属性类&#xff0c;接收yml文件中的属性4.3、封装文件上传功…...

【ES专题】ElasticSearch快速入门

目录 前言从一个【搜索】说起 阅读对象阅读导航笔记正文一、全文检索1.1 什么是【全文检索】1.2 【全文检索】原理1.3 什么是倒排索引 二、ElasticSearch简介2.1 ElasticSearch介绍2.2 ElasticSearch应用场景2.3 数据库横向对比 三、ElasticSearch环境搭建3.1 Windows下安装3.2…...

案例分析真题-质量属性

案例分析真题-质量属性 2009 年真题 【问题1】 【问题2】 2011 年真题 【问题1】 骚戴理解&#xff1a;首先要知道这样的题目没有可靠性&#xff0c;只有可用性&#xff0c;更没有容错性&#xff0c;这里我&#xff08;3&#xff09;写成了i&#xff0c;而不是f&#xff0c;仔…...

微信小程序面试题之理论篇

本文内容&#xff0c;来源于极客学院的分享&#xff0c;这里只做引用。 说说你对微信小程序的理解?优缺点? 背景 小程序与H5 优缺点 优点&#xff1a;缺点&#xff1a; 说说微信小程序的生命周期函数有哪些&#xff1f; 应用的生命周期页面的生命期组件的生命周期执行过程 应…...

C++前缀和算法的应用:统计上升四元组

C前缀和算法的应用&#xff1a;统计上升四元组 本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 题目 给你一个长度为 n 下标从 0 开始的整数数组 nums &#xff0c;它包含 1 到 n 的所有数字&#xff0c;请你返回上…...

华泰证券:新奥能源:零售气待恢复,泛能与智家仍是亮点

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;由于新奥能源&#xff08;02688&#xff09;发布三季度经营数据&#xff1a; 1-3Q23&#xff1a;天然气零售量yoy-4.7%&#xff0c;燃气批发量yoy17.6%&#xff0c;综合能源销量yoy34.2%&#xff…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...