使用macOS系统编译Opencvjs
一、前言
opencv官网提供的编译文档：https://docs.opencv.org/3.3.1/d4/da1/tutorial_js_setup.html，非常有参考价值，每一步都要认真看。
重要的话说在前面：如果是在前端使用opencv.js，不用再进行build_wasm。
Opencv4.x的版本下，只有opencv.js和opencv_js.js这两个文件，但其实 WebAssembly 的内容已经编译成功，但已经嵌入.js文件中。参考
之前我看了很多教程，上面提到了要把opencv.js、opencv_js.js和opencv_wasm文件均放到js前端代码里面，其实不需要opencv_wasm，实际上只用引用opencv.js，即可在前端使用opencv的库
二、依赖的包
安装Git
直接在git官网上下载最新的安装包，点击“下一步”操作，即可安装成功。
安装Cmake
cmake能够将C++的一些库进行编译，具体的安装步骤如下：
到Cmake官网下载dmg包，根据macOS内核的版本选择相应的Cmake版本。安装Cmake的教程
验证Cmake是否安装成功
# 2. 通过命令查看Cmake是否安装成功
cmake --version
安装Python
直接到官网上下载安装即可，最好安装3.8以上的版本。也可以通过Anaconda配置python包的环境
安装Emscripten
# 1. 从远程仓库拉取emskd的代码
git clone https://github.com/emscripten-core/emsdk.git
# 2. 进入emsdk目录
cd emsdk
# 3. 拉取最新的版本
git pull
# 4. 下载最新的最新的emsdk工具包
./emsdk install latest
# 5. 激活当前最新的emsdk环境
./emsdk activate latest
# 6. 将路径添加到PATH中，相当于配置全局的环境
source ./emsdk_env.sh
# 查看环境是否配置好
echo ${EMSCRIPTEN}
# 7. 查看是否安装成功
emcc -v
# 欢迎使用Markdown编辑器
下面是安装Emscripten的部分截图
验证Emscripten是否安装成功
emcc -v
打印的信息如下：
三、安装Opencv
1、下载opencv的代码
git clone https://github.com/opencv/opencv.git
这种方式可能下载速度比较慢，可以到SourceForge官网直接搜索opencv，即可下载最新的代码。
2、编译opencv
cd opencv
python ./platforms/js/build_js.py build_js
编译过程截图如下，大概得20分钟。编译成功后，它会在最后提示你OpenCV.js的位置。我编译的opencv.js是（8.7M左右）
如果编译报错，提示emscripten和emscripten_dir 变量为设置，可以在运行时加入emscripten_dir参数
python3 ./platforms/js/build_js.py --emscripten_dir
或者是直接设置EMSCRIPTEN_DIR变量
export EMSCRIPTEN_DIR=/Users/dd/emsdk/upstream/emscripten
在前端运行官方的demo
在opencv的官网上，复制一个在canvas上读取和显示图像的demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
<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">
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function() {
let mat = cv.imread(imgElement);
cv.imshow('canvasOutput', mat);
mat.delete();
};
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
