WebAssembly探索篇（三）emcc和cmake编译opencv案例

    最近因为项目原因，研究了一下WebAssembly。2015年上线与JS、HTML、CSS并称web界四语言，额，虽然已经上线快10年，但是研究的人好少，注定这个探索之路是崎岖的。（事实也是这样，已经耗进去快2周了，人都麻了-_-||）
    这是一个曲折的探索之路，emcc编译opencv的代码真的问题好多。。。

开发环境

为啥要把开发环境放在第一位呢，这里面也是采了无数的坑。

安装opencv环境

1. 安装

sudo apt-get update
sudo apt-get install libopencv-dev
1
2

2. 查看opencv的lib目录

dpkg -L libopencv-dev
1

3. 配置环境变量

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
1
2
3

实践出真知

完整项目

项目结构如下：

┌─demo              项目名称 
│─build             编译文件(emcmake和emmake后的产物)
│  └─CMakeFile       
│  │  └─...      
│  └─cmake_install.cmake
│  └─CMakeCache.txt
│  └─Makefile
│  └─helloCV.js
│  └─helloCV.wasm   
├─main.cpp          主入口
├─CMakeLists.txt        
1
2
3
4
5
6
7
8
9
10
11

1. main.cpp

#include 
#include 
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;
}
1
2
3
4
5
6
7
8

2. 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} )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3. 执行cmake

//在项目根目录下，执行如下命令
mkdir build 
cd build 
emcmake cmake ..
emmake make 
1
2
3
4
5

效果图

将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 写的想吐。。。