响应式网站和短视频精准获客系统
前言：
有段时间没来写文章了，趁编译库的空闲，再写一篇记录文档
WebAssembly的发展逐渐成熟，即便不了解相关技术，web前端也在不经意中使用了相关技术的库，本篇文档记录下如何编译WebAssembly版本的openCV，可以给使用C++开发web前端的小伙伴使用
一、安装需要的软件
1.安装git
这方便教程很多，不再重复。笔者使用的是git2.33
2.安装cmake
这个教程也很多，但笔者没有安装，使用的是Qt安装时，下载的
3.安装emsdk3.1.37
笔者偷懒了，也是搭建qt6.6.0时使用的版本，具体教程就不放置了
若不想自己安装的，可以下载笔者使用的版本
二、下载所需要的资源
1.下载opencv4.8.1源码
https://github.com/opencv/opencv/archive/refs/tags/4.8.1.zip
2.下载opencv_contrib-4.8.1源码
https://github.com/opencv/opencv_contrib/archive/refs/tags/4.8.1.zip
3.wechat_qrcode模型
detect.caffemodel
detect.prototxt
sr.caffemodel
sr.prototxt
4.xfeatures2d
boostdesc_bgm.i
boostdesc_bgm_bi.i
boostdesc_bgm_hd.i
boostdesc_binboost_064.i
boostdesc_binboost_128.i
boostdesc_binboost_256.i
boostdesc_lbgm.i
vgg_generated_48.i
vgg_generated_64.i
vgg_generated_80.i
vgg_generated_120.i
5.face_landmark_model.dat
三、设置环境变量
环境变量设置方法很多，可以直接设置系统的环境变量，笔者使用的是在一个cmd窗口中临时设置环境变量
执行如下命令
D:\emsdk\emsdk-3.1.37\emsdk_env.bat
set path=D:\Qt\Tools\mingw1120_64\bin;D:\Program Files\Git\usr\bin;%path%若是查看环境变量执行如下
echo %path%注：一定要记得，激活emsdk的环境变量
四、生成make文件
在设置好环境变量的cmd中执行(请按实际目录执行）
D:\Qt\Tools\CMake_64\bin\cmake-gui.exe
打开如下窗口
点击configure，弹出如下窗口
以上是笔者的设置，点击Next，
设置编译器，以下是笔者的设置
之后就是等待完成，此过程时间有点长
configure完成后，修改配置选项
笔者提示，很多库并没有做web上的兼容，建议先编译opencv官方推荐的选项，然后再根据自己的需要，增加其他模块
以下是opencv官方使用的默认选项，可供有需要的小伙伴参考
'-DPYTHON_DEFAULT_EXECUTABLE=D:\\Program\\Python310\\python.exe',
'-DENABLE_PIC=FALSE',
'-DCMAKE_BUILD_TYPE=Release',
"-DCMAKE_TOOLCHAIN_FILE='emsdk-3.1.37\\cmake\\Modules\\Platform\\Emscripten.cmake'",
"-DCPU_BASELINE=''",
'-DCMAKE_INSTALL_PREFIX=/usr/local',
"-DCPU_DISPATCH=''",
'-DCV_TRACE=OFF',
'-DBUILD_SHARED_LIBS=OFF',
'-DWITH_1394=OFF',
'-DWITH_ADE=OFF',
'-DWITH_VTK=OFF',
'-DWITH_EIGEN=OFF',
'-DWITH_FFMPEG=OFF',
'-DWITH_GSTREAMER=OFF',
'-DWITH_GTK=OFF',
'-DWITH_GTK_2_X=OFF',
'-DWITH_IPP=OFF',
'-DWITH_JASPER=OFF',
'-DWITH_JPEG=OFF',
'-DWITH_WEBP=OFF',
'-DWITH_OPENEXR=OFF',
'-DWITH_OPENGL=OFF',
'-DWITH_OPENVX=OFF',
'-DWITH_OPENNI=OFF',
'-DWITH_OPENNI2=OFF',
'-DWITH_PNG=OFF',
'-DWITH_TBB=OFF',
'-DWITH_TIFF=OFF',
'-DWITH_V4L=OFF',
'-DWITH_OPENCL=OFF',
'-DWITH_OPENCL_SVM=OFF',
'-DWITH_OPENCLAMDFFT=OFF',
'-DWITH_OPENCLAMDBLAS=OFF',
'-DWITH_GPHOTO2=OFF',
'-DWITH_LAPACK=OFF',
'-DWITH_ITT=OFF',
'-DWITH_QUIRC=ON',
'-DBUILD_ZLIB=ON',
'-DBUILD_opencv_apps=OFF',
'-DBUILD_opencv_calib3d=ON',
'-DBUILD_opencv_dnn=ON',
'-DBUILD_opencv_features2d=ON',
'-DBUILD_opencv_flann=ON',
'-DBUILD_opencv_gapi=OFF',
'-DBUILD_opencv_ml=OFF',
'-DBUILD_opencv_photo=ON',
'-DBUILD_opencv_imgcodecs=OFF',
'-DBUILD_opencv_shape=OFF',
'-DBUILD_opencv_videoio=OFF',
'-DBUILD_opencv_videostab=OFF',
'-DBUILD_opencv_highgui=OFF',
'-DBUILD_opencv_superres=OFF',
'-DBUILD_opencv_stitching=OFF',
'-DBUILD_opencv_java=OFF',
'-DBUILD_opencv_js=ON',
'-DBUILD_opencv_python2=OFF',
'-DBUILD_opencv_python3=OFF',
'-DBUILD_EXAMPLES=ON',
'-DBUILD_PACKAGE=OFF',
'-DBUILD_TESTS=ON',
'-DBUILD_PERF_TESTS=ON',
'-DBUILD_DOCS=OFF',
'-DWITH_PTHREADS_PF=OFF',
'-DCV_ENABLE_INTRINSICS=OFF',
'-DBUILD_WASM_INTRIN_TESTS=OFF',
"-DCMAKE_C_FLAGS='-s WASM=1 -s SINGLE_FILE=1 -s USE_PTHREADS=0 '",
"-DCMAKE_CXX_FLAGS='-s WASM=1 -s SINGLE_FILE=1 -s USE_PTHREADS=0 '"内容比较多，需要大家细心设置，或第一次直接使用cmake命令
以下是笔者感兴趣的选项
安装目录（生成的动态库的目录）
是否生成付费相关的部分
添加扩展库，注意要具体到modules目录
再次点击configure后，可能还需要还需要设置多次，配置其他选项或下载文件
继续点击configure（可以多点几次，有时多点几次就可以下载成功），
若输出中仍然存在红色的文字，打开编译目录，找到日志文件CMakeDownloadLog.txt，查看缺少或下载失败的文件，下载完成后，按日志文件的提示，放入指定目录即可
笔者已下载缺少的文件，处理方法如下
1.把downloads和testdata两个目录，直接放在编译目录（笔者已整理好内部目录）
再次点击configure，此时应该不会有红色的文字了（若存在，请自主解决）
点击generate,生成makefile文件
四、编译源码
设置好环境变量的cmd中，切换目录到编译目录(请按实际目录执行）
执行mingw32-make -j6 开始编译
（6代表同时开6个线程编译，请读者按照自己机器的配置设置，以加快编译速度）
些过程耗时较长，笔者等待了半小时左右
编译完成后，执行mingw32-make install
过会就可以在安装目录找到生成的静态库了，笔者是在编译目录下的install
因时间关系，笔者本次就不添加测试程序了
已生成的静态库（正式库+xfeatureds2d)
后记：
1.WebAssembly开发，一般使用静态库，若有小伙伴执意使用动态库，可以自行编译下测试
2.部分库，即使编译成功，也不一定能使用，或出错，如imgcodecs模块，笔者使用cv::imwrite()时，会导致网页异常退出
3.笔者建议，不要使用world的库，发布程序时，库太大了，不实用