本文主要是介绍WebAssembly探索篇（三）emcc和cmake编译opencv案例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 开发环境
- 安装opencv环境
- 实践出真知
- 完整项目
- 效果图
- 踩坑
- fatal error: 'opencv2/opencv.hpp' file not found
- 增加软链ln（无效）
- 改用自行安装opencv，再显示指定lib路径
- emcc命令行运行方式
最近因为项目原因，研究了一下WebAssembly。2015年上线与JS、HTML、CSS并称web界四语言，额，虽然已经上线快10年，但是研究的人好少，注定这个探索之路是崎岖的。（事实也是这样，已经耗进去快2周了，人都麻了-_-||）
这是一个曲折的探索之路，emcc编译opencv的代码真的问题好多。。。
开发环境
为啥要把开发环境放在第一位呢，这里面也是采了无数的坑。
| 开发工具 | 版本 |
|---|---|
| Ubuntu | 18.04 |
| emscripten | 3.1.55 |
| cmake | 3.28.3 |
| opencv | 3.2.0 |
安装opencv环境
- 安装
sudo apt-get update
sudo apt-get install libopencv-dev
- 查看opencv的lib目录
dpkg -L libopencv-dev
- 配置环境变量
export LD_LIBRARY_PATH=/usr/lib/x86_64-linux-gnu
export PKG_CONFIG_PATH=/usr/lib/x86_64-linux-gnu/pkgconfig:$PKG_CONFIG_PATH
source ~/.bashrc
实践出真知
完整项目
项目结构如下：
┌─demo 项目名称
│─build 编译文件(emcmake和emmake后的产物)
│ └─CMakeFile
│ │ └─...
│ └─cmake_install.cmake
│ └─CMakeCache.txt
│ └─Makefile
│ └─helloCV.js
│ └─helloCV.wasm
├─main.cpp 主入口
├─CMakeLists.txt
- main.cpp
#include <opencv2/opencv.hpp>
#include <stdio.h>
using namespace cv;
int main(int argc, char **argv) {Mat M(2, 2, CV_8UC3, Scalar(0, 0, 255));std::cout << "M = " << std::endl << " " << M << std::endl;return 0;
}
- CMakeLists.txt
cmake_minimum_required( VERSION 3.8 )
set( CMAKE_CXX_STANDARD 17 )
project( helloCV )# Needed for opencv2/opencv.hpp
include_directories( /root/wasm/opencv-demo/opencv/include )# Needed by opencv.hpp for opencv2/opencv_modules.hpp
include_directories( /root/wasm/opencv-demo/opencv/platforms/js/build_wasm )# Needed by opencv_modules.hpp for every module
file( GLOB opencv_include_modules "/root/wasm/opencv-demo/opencv/modules/*/include" )
include_directories( ${opencv_include_modules} )# Our hello world executable
add_executable( helloCV main.cpp )set(CMAKE_EXECUTABLE_SUFFIX ".html") # 编译生成.html# Link to opencv.js precompiled libraries
file( GLOB opencv_js "/root/wasm/opencv-demo/opencv/platforms/js/build_wasm/lib/*.a" )
target_link_libraries( helloCV ${opencv_js} )
- 执行cmake
//在项目根目录下，执行如下命令
mkdir build
cd build
emcmake cmake ..
emmake make
效果图
将helloCV.html、helloCV.js和helloCV.wasm三个文件下载下来，在vscode中使用preview on web server插件运行，如下图：
踩坑
fatal error: ‘opencv2/opencv.hpp’ file not found
刚开始使用apt-get安装opencv库，并且用emcc命令行执行编译，但疯狂报错，查阅大量资料，有人说emcc只能引用静态库，动态库会报错！
增加软链ln（无效）
make-opencv2-opencv-hpp-not-found
sudo ln -s /usr/share/OpenCV /usr/include/opencv2
改用自行安装opencv，再显示指定lib路径
How to use emscripten with cmake for project dependencies?
stackoverflow真的有太多的宝藏，在里面帖子里找到了解决方案！
emcc命令行运行方式
问题很多，无法吐槽，只能避开，如果依赖的第三方库太多，强烈建议不要使用此方式，不然-l 写的想吐。。。
这篇关于WebAssembly探索篇（三）emcc和cmake编译opencv案例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
