一篇带给你Windows 10自定义构建Opencv.js

前言

本文主要讲win10系统怎么编译出opencv.js。

主要编译过程跟官网一样，先安装Emscripten，再获取opencv源码，再编译opencv源码。

本文主要解决的问题是在win10怎么完成编译。

WSL

先说一下背景，公司的电脑是win10，构建opencv.js需要用到Emscripten，而Emscripten官网不推荐直接在windows系统上运行，对windows用户推荐了windows的Linux子系统。

一开始我不了解什么是window的Linux子系统，即WSL，于是我直接在windows中运行了(我不想装虚拟机，也不想重装系统，也不想把mac带到公司来)，结果捣腾了2天也没把编译时的各种报错解决完，报错一个接一个，解决完一个又出现一个……

最后我决定去看一下WSL，发现非常好用，编译opencv.js一举成功!

安装WSL

1、勾选适用于Linux的windows子系统

路径是「控制面板」-「程序」-「启用或关闭Windows功能」

2、打开 Microsoft Store，搜索「WSL」，选1个安装，比如我装的第一个Ubantu 20.04。

3、安装完成后自动打开终端，没有自动打开就手动打开，跟linux系统一样，设置好用户名和密码，就进入linux系统了。

编译opencvjs

1、确保安装了git、cmake、python，没有安装的话运行下列命令安装：

sudo apt install git
sudo apt install cmake
sudo apt install python

安装后可以通过下列命令查看安装的版本：

2、安装Emscripten

# 创建customopencv目录
mkdir customopencv
# 进入customopencv目录
cd customopencv/
# 拉取emscripten源码
git clone https://github.com/emscripten-core/emsdk.git
# 进入emsdk目录
cd emsdk/
# 安装emsdk
./emsdk install latest
# 激活emsdk
./emsdk activate latest
# 设置环境变量
source ./emsdk_env.sh

3、获取opencv

回到上级目录，clone opencv源码：

# 拉取opencv源码
git clone https://github.com/opencv/opencv.git

4、编译opencvjs

运行下面的命令来编译：

python platforms/js/build_js.py build_out --emscripten_dir /home/lovelyun/customopencv/emsdk/upstream/emscripten --build_wasm --clean_build_dir

接下来去喝杯水，然后就可以看到编译成功了：

=====
===== Build finished
=====
OpenCV.js location: /home/lovelyun/customopencv/opencv/build_out/bin/opencv.js

进入到上面的bin文件夹，运行ls -l可以看到文件详情：

或者用du -sh *查看它们占用的空间：

这里的opencv.js就是我们最后需要的文件，现在在Linux子系统中，怎么传到windows系统中呢?

最简单的是在文件资源管理器的地址栏输入\wsl$，回车就可以看到所有的子系统。

点进去就可以看到上面的文件，比如我的路径是\wsl$Ubuntu-20.04homelovelyuncustomopencvopencvbuild_outbin。

自定义opencv构建模块

接下来我们去掉DNN模块，首先用vscode打开子系统中的opencv文件夹，打开/platforms/js/build_js.py文件，把get_cmake_cmd(self)函数中的-DBUILD_opencv_dnn=ON改为-DBUILD_opencv_dnn=OFF。

重新构建后可以看到，opencv.js从一开始的8.6M减小到了5.5M。

我们还可以修改opencv_js.config.py，去掉没用到的函数，比如只保留core和imgproc。

此时编译出来的opencv.js就只有3.7M。

或许你觉得3.7M也很大，当然大啦，但是core和imgproc中没用到的函数还可以接着删除呀。

demo

直接把bin目录中的opencv.js复制到项目中，比如下面这样引用：

<script src="js/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>

然后发现调用cv的api会报错，比如cv.imread is not a function。

打印发现cv是一个promise，这里我们简单的处理一下，把cv重新赋值为promise返回的结果，就可以运行起来了。

async function onOpenCvReady() {
  window.cv = await window.cv
}

按照官网的说法，应该是可以直接使用编译出来的opencv.js的，即直接替换官网编译的opencv.js。这里实测直接替换有问题，那就解决它，我们暂时不纠结为什么会有问题了，

总结

需要Linux环境的问题，就用Linux，不要用windows环境瞎折腾。

这次编译的大部分时间都在解决windows上的报错问题，虽然windows上安装都是成功的，校验是否安装成功的结果都是ok的，但编译时各种报错，最后用了WSL，一开始为了省时间直接把windows上下载的emsdk文件夹cp过去用，而且WSL中的python环境默认是python3，这些因素也导致了编译报错，最后我想完全重新来一次，在WSL中重新下载emscripten，重新安装python，最后用的python2，编译一次性成功。

用Linux编译，感觉就是超幸运，干什么都是一次成功。

虽然觉得这种环境问题导致的报错解决起来浪费时间还没什么意义，但是编译成功的那一刻还是挺兴奋的，哈哈哈……