官方文檔信息
學(xué)習(xí)計(jì)算機(jī)視覺接觸到的第一個(gè)庫，非常有意思的是，竟然有JS的版本
這是官方文檔：https://docs.opencv.org/3.3.1/d5/d10/tutorial_js_root.html
為了節(jié)省大家的時(shí)間，我這里對(duì)官方的介紹簡單摘要一些：
OpenCV supports a wide variety of programming languages such as C++, Python, and Java, and is available on different platforms including Windows, Linux, OS X, Android, and iOS. Interfaces for high-speed GPU operations based on CUDA and OpenCL are also under active development. OpenCV.js brings OpenCV to the open web platform and makes it available to the JavaScript programmer…
Emscripten is an LLVM-to-JavaScript compiler. It takes LLVM bitcode - which can be generated from C/C++ using clang, and compiles that into asm.js or WebAssembly that can execute directly inside the web browsers…
翻譯：
OpenCV 支持多種編程語言，例如 C++、Python 和 Java，并且可在各種平臺(tái)上運(yùn)行，包括 Windows、Linux、OS X、Android 和 iOS。針對(duì)基于 CUDA 和 OpenCL 的高速 GPU 操作的接口也正處于積極開發(fā)之中。OpenCV.js 則將 OpenCV 引入開放網(wǎng)絡(luò)平臺(tái)，使其可供 JavaScript 程序員使用…
Emscripten 是一款 LLVM 至 JavaScript 的編譯器。它接受 LLVM 位碼作為輸入，該位碼可以通過 clang 工具從 C/C++ 代碼生成，并進(jìn)一步將這些位碼編譯為 asm.js 或 WebAssembly，這兩種格式均能在現(xiàn)代網(wǎng)絡(luò)瀏覽器內(nèi)部直接執(zhí)行…
Emscripten：神奇的編譯器
根據(jù)上文我們可以得知，這里是需要用 Emscripten 把 OpenCV 編譯為 OpenCV.js
如果你不希望自己手動(dòng)完成整個(gè)編譯過程，可以跳過這幾個(gè)章節(jié)，直接到《直接獲取編譯產(chǎn)物》部分
ASM.js 與 WebAssembly
-
ASM.js
簡單來說，ASM.js 是一位名叫 Alon Zakai 的博士發(fā)明的，初衷只是為了讓自己喜歡的游戲能夠在 Web 環(huán)境運(yùn)行。
他為此發(fā)明了一種工具叫做 Enscripten，是一個(gè) LLVM 工具鏈，能夠把 C/C++ 代碼編譯為 JS，同時(shí)為了保證性能，這種 JS 被加上了一些特定的限制，也就成了 ASM.js。 -
WebAssembly
后來，Mozilla、Google 之類的瀏覽器廠商也注意到了 ASM.js，受其啟發(fā)，最終做出了 WebAssembly。
詳情請(qǐng)參考：https://ruanyifeng.com/blog/2017/09/asmjs_emscripten.html
下載 Emscripten 并配置環(huán)境
要使用 Emscripten 產(chǎn)生 wasm 的第一步則是：
To Install Emscripten, follow instructions of Emscripten SDK.
注意，在安裝之前，需要注意系統(tǒng)兼容性，這里看看對(duì)Windows的要求：
Instead of running emscripten on Windows directly, you can use the Windows Subsystem for Linux（WSL） to run it in a Linux environment.
我們安裝一個(gè) WSL 再去做下一步。
安裝好之后的步驟就是：
1. 拉取源碼倉庫并進(jìn)入
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
2. 更新源碼（剛剛clone過的話就不用走這一步了）
git pull
3. 下載安裝 SDK 并啟用（非常容易失敗，多試億次就好）
./emsdk install latest
./emsdk activate latest
4. 設(shè)置環(huán)境變量，并檢測(cè)是否設(shè)置成功（如果設(shè)置失敗可以跳過這一步，采取下述的其他方案）
source ./emsdk_env.sh
echo ${EMSCRIPTEN} // 如果輸出了非空的值，那么就成功了
windows下改為運(yùn)行 bat 腳本，但是還是可能報(bào)錯(cuò)（報(bào)錯(cuò)請(qǐng)看下方的一些分析）
如果出現(xiàn)異常，那么請(qǐng)按照下方的提示自行排查??：
- 請(qǐng)仔細(xì)看命令結(jié)束后提示的信息，確保第1-3步真的運(yùn)行成功了
- 請(qǐng)確保網(wǎng)絡(luò)暢通
- 檢查WSL是否安裝 bzip2、cmake 等
- 請(qǐng)確保正確配置了環(huán)境變量；如果沒有配置成功的話，后續(xù)也可以手動(dòng)指定 emscripten 的路徑，這將在下一章節(jié)中提及。
之后每次版本更新，都得git拉取最新的代碼然后走上面的步驟進(jìn)行編譯。
這里似乎有點(diǎn)麻煩，或許可以封裝一個(gè)腳本去簡化上述流程。
下載 OpenCV 并編譯
繼續(xù)按照官方文檔教的做就好：
1. 下載OpenCV源碼
git clone https://github.com/opencv/opencv.git
2. 打包構(gòu)建，并把產(chǎn)物放到 build_js 目錄下（注意需要 python3.6+ 和 cmake）
這里默認(rèn)是打包為 asm.js, 如果要打包為 wasm 則需要在末尾加上 --build_wasm 參數(shù)
cd opencv
python3 ./platforms/js/build_js.py build_js
如果之前沒有配置emscripten的環(huán)境變量，則現(xiàn)在需要手動(dòng)指定，即把上面第二條指令換成這個(gè)：
python3 ./platforms/js/build_js.py --emscripten_dir ../emsdk/upstream/emscripten build_js
如果上述過程沒有發(fā)生報(bào)錯(cuò)，那么之后就進(jìn)入到漫長的編譯測(cè)試流程(我這里用了一個(gè)小時(shí)左右)…
引入并使用 OpenCV.js
還是比較簡單，直接當(dāng)一個(gè)UMD模塊進(jìn)入就好了
<script src="./opencv.js" type="text/javascript"></script>
直接獲取編譯產(chǎn)物
- 上述過程得到的產(chǎn)物，可以直接在我的 Github 獲?。?/li>
https://github.com/CoderSerio/opencv.js
- 官方編譯好的產(chǎn)物：
https://docs.opencv.org/4.8.0/opencv.js
其中4.8.0是手動(dòng)指定的版本，可以根據(jù)需要進(jìn)行修改，推薦下載到本地使用
使用 OpenCV.js
在瀏覽器中使用
代碼實(shí)現(xiàn)
這里我們將編譯產(chǎn)物opencv.js復(fù)制到我們的 web 項(xiàng)目中，然后編寫一個(gè)像下面這樣的 html 啟動(dòng)一個(gè)本地服務(wù)器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello OpenCV.js</title>
<style>
.content {
display: flex;
}
.content > .inputoutput {
border: 1px solid #000;
}
</style>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div class="content">
<div class="inputoutput">
<img id="imageSrc" alt="No Image" />
<div class="caption">
imageSrc <input type="file" id="fileInput" name="file" />
</div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
</div>
<script type="text/javascript">
async function onOpenCvReady() {
if (cv instanceof Promise) {
cv = await cv;
console.log(cv.Mat);
console.log(cv.matFromArray);
}
const imgElement = document.getElementById("imageSrc");
const inputElement = document.getElementById("fileInput");
imgElement.onload = function () {
const src = cv.imread(imgElement); // 讀入圖片，格式是一個(gè)矩陣
const dst = new cv.Mat(); // 新的矩陣
cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY, 0); // 寫入新的矩陣并做灰度處理
cv.imshow("canvasOutput", dst); // 將內(nèi)容輸出到一個(gè) canvas 上
src.delete();
dst.delete();
};
inputElement.addEventListener(
"change",
(e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
},
false
);
}
var Module = {
// https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitialized
onRuntimeInitialized() {
document.getElementById("status").innerHTML = "OpenCV.js is ready.";
},
};
</script>
<script src="./opencv.js" onload="onOpenCvReady();"></script>
</body>
</html>
運(yùn)行效果
啟動(dòng)后的效果：
使用效果如下：
在 Node.js 中使用
在 WSL 中安裝 Node
接下來的過程仍然會(huì)在 WSL 中進(jìn)行，所以這里需要現(xiàn)在 WSL 中安裝 NODE
考慮到網(wǎng)絡(luò)不穩(wěn)定，安裝 nvm 的過程可以用下面這個(gè)命令來替代：
git clone https://gitee.com/mirrors/nvm.git ~/.nvm && cd ~/.nvm && git checkout git describe --abbrev=0 --tags
clone 完這個(gè)庫之后，在里面能夠找到一個(gè) install.sh，執(zhí)行即可
如果執(zhí)行失敗，也可以參考下文手動(dòng)配置環(huán)境(如果之前你已經(jīng)安裝過了，那么可以試試直接執(zhí)行第 3 步）：
1.打開環(huán)境配置文件（這里我用的 bash，所以在 bashrc 中
vim ~/.bashrc
2. 文件末尾寫入內(nèi)容
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
3. 刷新 WSL 的環(huán)境配置文章來源：http://www.zghlxwxcb.cn/news/detail-860710.html
source .bashrc (如果已經(jīng)配置過了，那么直接填之前的bashrc路徑即可)
代碼實(shí)現(xiàn)與在瀏覽器中基本一致，細(xì)節(jié)可以參閱上文中提到的官方文檔。
代碼實(shí)現(xiàn)和運(yùn)行效果
代碼實(shí)現(xiàn)與在瀏覽器中基本一致，細(xì)節(jié)可以參閱上文中提到的官方文檔，此處不再贅述。文章來源地址http://www.zghlxwxcb.cn/news/detail-860710.html
到了這里，關(guān)于OpenCV.js 入門教程指北：下載/安裝/編譯/代碼實(shí)現(xiàn)/運(yùn)行 一條龍的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
