前言

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

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

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

WSL

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

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

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

安裝WSL

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

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

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

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

編譯opencvjs

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

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

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

2、安裝Emscripten

# 創(chuàng)建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
# 設置環(huán)境變量
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文件夾，運行l(wèi)s -l可以看到文件詳情：

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

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

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

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

自定義opencv構建模塊

接下來我們去掉DNN模塊，首先用vscode打開子系統(tǒng)中的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>

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

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

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

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

總結

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

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

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

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