前言

本文主要講win10系統(tǒng)怎么編譯出opencv.js。

主要編譯過程跟官網(wǎng)一樣，先安裝Emscripten，再獲取opencv源碼，再編譯opencv源碼。

本文主要解決的問題是在win10怎么完成編譯。

WSL

先說一下背景，公司的電腦是win10，構(gòu)建opencv.js需要用到Emscripten，而Emscripten官網(wǎng)不推薦直接在windows系統(tǒng)上運(yùn)行，對(duì)windows用戶推薦了windows的Linux子系統(tǒng)。

一開始我不了解什么是window的Linux子系統(tǒng)，即WSL，于是我直接在windows中運(yùn)行了(我不想裝虛擬機(jī)，也不想重裝系統(tǒng)，也不想把mac帶到公司來)，結(jié)果搗騰了2天也沒把編譯時(shí)的各種報(bào)錯(cuò)解決完，報(bào)錯(cuò)一個(gè)接一個(gè)，解決完一個(gè)又出現(xiàn)一個(gè)……

最后我決定去看一下WSL，發(fā)現(xiàn)非常好用，編譯opencv.js一舉成功!

安裝WSL

1、勾選適用于Linux的windows子系統(tǒng)

路徑是「控制面板」-「程序」-「啟用或關(guān)閉Windows功能」

2、打開 Microsoft Store，搜索「WSL」，選1個(gè)安裝，比如我裝的第一個(gè)Ubantu 20.04。

3、安裝完成后自動(dòng)打開終端，沒有自動(dòng)打開就手動(dòng)打開，跟linux系統(tǒng)一樣，設(shè)置好用戶名和密碼，就進(jìn)入linux系統(tǒng)了。

編譯opencvjs

1、確保安裝了git、cmake、python，沒有安裝的話運(yùn)行下列命令安裝：

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

安裝后可以通過下列命令查看安裝的版本：

2、安裝Emscripten

# 創(chuàng)建customopencv目錄
mkdir customopencv
# 進(jìn)入customopencv目錄
cd customopencv/
# 拉取emscripten源碼
git clone https://github.com/emscripten-core/emsdk.git
# 進(jìn)入emsdk目錄
cd emsdk/
# 安裝emsdk
./emsdk install latest
# 激活emsdk
./emsdk activate latest
# 設(shè)置環(huán)境變量
source ./emsdk_env.sh

3、獲取opencv

回到上級(jí)目錄，clone opencv源碼：

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

4、編譯opencvjs

運(yùn)行下面的命令來編譯：

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

進(jìn)入到上面的bin文件夾，運(yùn)行l(wèi)s -l可以看到文件詳情：

或者用du -sh *查看它們占用的空間：

這里的opencv.js就是我們最后需要的文件，現(xiàn)在在Linux子系統(tǒng)中，怎么傳到windows系統(tǒng)中呢?

最簡單的是在文件資源管理器的地址欄輸入\\wsl$，回車就可以看到所有的子系統(tǒng)。

點(diǎn)進(jìn)去就可以看到上面的文件，比如我的路徑是\\wsl$\Ubuntu-20.04\home\lovelyun\customopencv\opencv\build_out\bin。

自定義opencv構(gòu)建模塊

接下來我們?nèi)サ鬌NN模塊，首先用vscode打開子系統(tǒng)中的opencv文件夾，打開/platforms/js/build_js.py文件，把get_cmake_cmd(self)函數(shù)中的-DBUILD_opencv_dnn=ON改為-DBUILD_opencv_dnn=OFF。

重新構(gòu)建后可以看到，opencv.js從一開始的8.6M減小到了5.5M。

我們還可以修改opencv_js.config.py，去掉沒用到的函數(shù)，比如只保留core和imgproc。

此時(shí)編譯出來的opencv.js就只有3.7M。

或許你覺得3.7M也很大，當(dāng)然大啦，但是core和imgproc中沒用到的函數(shù)還可以接著刪除呀。

demo

直接把bin目錄中的opencv.js復(fù)制到項(xiàng)目中，比如下面這樣引用：

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

然后發(fā)現(xiàn)調(diào)用cv的api會(huì)報(bào)錯(cuò)，比如cv.imread is not a function。

打印發(fā)現(xiàn)cv是一個(gè)promise，這里我們簡單的處理一下，把cv重新賦值為promise返回的結(jié)果，就可以運(yùn)行起來了。

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

按照官網(wǎng)的說法，應(yīng)該是可以直接使用編譯出來的opencv.js的，即直接替換官網(wǎng)編譯的opencv.js。這里實(shí)測直接替換有問題，那就解決它，我們暫時(shí)不糾結(jié)為什么會(huì)有問題了，

總結(jié)

需要Linux環(huán)境的問題，就用Linux，不要用windows環(huán)境瞎折騰。

這次編譯的大部分時(shí)間都在解決windows上的報(bào)錯(cuò)問題，雖然windows上安裝都是成功的，校驗(yàn)是否安裝成功的結(jié)果都是ok的，但編譯時(shí)各種報(bào)錯(cuò)，最后用了WSL，一開始為了省時(shí)間直接把windows上下載的emsdk文件夾cp過去用，而且WSL中的python環(huán)境默認(rèn)是python3，這些因素也導(dǎo)致了編譯報(bào)錯(cuò)，最后我想完全重新來一次，在WSL中重新下載emscripten，重新安裝python，最后用的python2，編譯一次性成功。

用Linux編譯，感覺就是超幸運(yùn)，干什么都是一次成功。

雖然覺得這種環(huán)境問題導(dǎo)致的報(bào)錯(cuò)解決起來浪費(fèi)時(shí)間還沒什么意義，但是編譯成功的那一刻還是挺興奮的，哈哈哈……