.準備工作

1. 部分操作必須外網,請自備代理
2. 電腦配置建議32G內存(至少8G,當然越多越好)
3. 硬盤空間,很多網上的教程都是100G,如果只是編譯一個版本的確實夠了,如果多個版本需要多預備硬盤空間,格式為NTFS，建議固態硬盤，機械會降低編譯速度
4. 系統Windows10及以上

2.確定編譯的版本

Chromium每天提交的Commit很多,沒有經過完全的測試,可能在編譯之后產生BUG,對于我這種編外人員不適合使用最新的源碼來進行編譯,也不建議讀者使用不穩定的代碼進行編譯（當然喜歡嘗鮮的什么版本都行）。

獲取穩定版本的版本有兩種方式

方式一: 安裝Chrome瀏覽器,在關于頁面找到版本號

方式二: 在https://chromiumdash.appspot.com/releases?platform=Windows對應的發布版本,我使用的是107.0.5304.122

3.構建說明

在確定好自己要編譯的版本后,需要找相對應的版本編譯說明,用瀏覽器打開https://chromium.googlesource.com/chromium/src.git,在左側的Tags中找到需要編譯的版本:

進入對應的Tag后在底部找到README.md的說明,在官方說明中不建議直接git clone倉庫,而是根據鏈接的指引來獲取源碼。基本上不是跨越太多的版本編譯說明基本是一樣的,除了對Windows SDK和Visual Studio有要求。

進入指引頁面后選擇Windows選項進入編譯說明的頁面,官方有對系統要求、Visual Studio以及Windows SDK都有詳細說明

我的配置:

CPU: AMD 3700x

內存: 32G

硬盤: 1T m.2

操作系統: Windows Server 2022(只要Windows 10以上就行)

4.安裝Visual Studio與SDK

根據編譯說明,需要安裝VS 2017 (版本>=15.7.2) 或VS 2019(版本>=16.0.0),VS下載地址：https://visualstudio.microsoft.com/zh-hans/downloads/

安裝編譯所必須的組件,勾選左側中的C++的桌面開發和右側的C++ATL生成工具，另外還需要安裝版本為10.0.20348.0的Windows SDK，可在單個組件中選擇安裝，或者單獨安裝，單獨安裝文件下載地址：https://developer.microsoft.com/en-us/windows/downloads/sdk-archive/

安裝完成Windows SDK后還需安裝SDK調試工具，安裝方法：控制面板 →程序 → 程序和功能 → 選擇“Windows Software Development Kit”→更改→“Change”→勾選“Debugging Tools For Windows”→Change

在安裝完成組件和SDK后就開始配置系統環境變量：

1. 添加系統變量 vs2019_install 變量值：為vs安裝的具體目錄，例如我的是：C:\Program Files (x86)\Microsoft Visual Studio19\Enterprise

2. 添加Windows SDK環境變量，變量名：WINDOWSSDKDIR 值為Windows 10 SDK的安裝目錄，我的是：C:\Program Files (x86)\Windows Kits

5.安裝depot_tools

下載地址：https://storage.googleapis.com/chrome-infra/depot_tools.zip ，解壓到你能找到的文件夾中（不要使用資源管理器中的拖放或復制粘貼提取，不然可能.git目錄不能正常復制出來，使用正常的壓縮包工具之間解壓到指定目錄即可），解壓完成后，需要將depot_tools目錄添加到PATH環境變量中，因為depot_tools內置了git和python，所以需要將depot_tools放到最前面

還需要再添加一個環境變量 DEPOT_TOOLS_WIN_TOOLCHAIN，其值為 0，作用是讓 depot_tools 使用本地安裝的 Visual Studio 版本（默認情況下，depot_tools 將嘗試使用 google 內部版本）：

接下來初始化depot_tools，使用管理員權限運行CMD并設置代理，如果使用了軟件設置系統全局代理的可以不用操作這一步

set http_proxy=127.0.0.1:7890
set https_proxy=127.0.0.1:7890

執行gclient初始化

沒有配置過git的需要配置一下，命令行執行以下命令即可：

git config --global user.name "My Name"
git config --global user.email "my-name@chromium.org"
git config --global core.autocrlf false
git config --global core.filemode false
git config --global branch.autosetuprebase always

6.獲取chromium代碼

有兩種方式可以獲取源碼，在拉取源碼之前，先建一個目錄用來存放源碼

第一種，從官方拉取，這種方式需要全程代理

git clone -b 107.0.5304.122 https://chromium.googlesource.com/chromium/src.git src

第二種，通過國內的gitee拉取，拉取源碼時不需要代理

git clone -b 107.0.5304.122 https://gitee.com/mirrors/chromium.git src
# 還原git倉庫地址
cd src
git remote set-url origin https://chromium.googlesource.com/chromium/src.git

不想拉取全部log的可以增加--depth參數（建議值100，太小可能會報錯）

因為使用的是自定義拉取的方式，所以還需要利用命令在src同級目錄生成.gclient文件，然后同步所有的第三方依賴，同步過程中一般中斷的情況都是因為網絡原因，可以重新使用gclient sync 繼續同步

//通過命令行在src同級目錄下生成.gclient文件
gclient config --unmanaged https://chromium.googlesource.com/chromium/src.git
//同步第三方依賴,這里建議開啟系統全局代理 ，防止下載失敗，根據網絡和代理的情況，可能
//需要幾小時，中途失敗可，繼續重復執行下面的命令，直到成功
gclient sync

執行完畢如下圖：

7.編譯瀏覽器

1.默認方案編譯

運行命令行，進入已經拉取并同步了源碼的 src 目錄 ，運行一下命令

//默認生成方案
gn gen out\Default

//等待生成方案結束后運行編譯默認方案
autoninja -C out\Default chrome

2.帶參數方案編譯

//執行以下命令會彈出記事本文件，可以配置編譯參數
gn args out\Release
//編譯默認模塊
autoninja -C out\Release chrome
//編譯安裝版的安裝程序包
autoninja -C out\Release mini_installer

參數說明：

• is_component_build = true- 這使用更多、更小的 DLL 和增量鏈接，開發版默認開啟，發布版可以設置為false。
• enable_nacl = false 這將禁用本地構建通常不需要的本機客戶端，基本上不使用，默認關閉。
• target_cpu = "x86" x86 版本比 x64 版本略快，并支持更多目標的增量鏈接如果設置了此選項但沒有設置 enable_nacl = false，則構建時間可能會變得更糟。
• blink_symbol_level = 0 關閉 Blink 的源代碼級調試以減少構建時間，如果不打算調試 Blink，則適用。
• v8_symbol_level = 0 關閉 V8 的源代碼級調試以減少生成時間，如果你不打算調試 V8，則適用。
• is_debug=false 生成開發版還是發布版
• is_official_build=true 使用chrome官方的編譯優化建議

編譯時間可能幾小時（該吃飯的吃飯，該睡覺的睡覺），這是根據自身機器性能決定，我的機子配置偏差編譯差不多花了兩小時左右，如果編譯過程中突然中斷了可以繼續執行編譯命令繼續編譯

編譯結果

前言

本文主要講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.04\home\lovelyun\customopencv\opencv\build_out\bin。

自定義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編譯，感覺就是超幸運，干什么都是一次成功。

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