文章目录
- 开发环境
- 安装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 写的想吐。。。