OpenCV.js 入门教程指北：下载/安装/编译/代码实现/运行一条龙

本文链接：https://blog.csdn.net/Serio_gugugu/article/details/138061000

本文介绍了如何使用OpenCV库的JavaScript版本OpenCV.js，通过Emscripten将C++编写的OpenCV代码转换为JavaScript。文章详细讲解了安装Emscripten、配置环境、编译过程以及在浏览器和Node.js中的应用示例。

摘要由CSDN通过智能技术生成

官方文档信息

学习计算机视觉接触到的第一个库，非常有意思的是，竟然有JS的版本

这是官方文档：https://docs.opencv.org/3.3.1/d5/d10/tutorial_js_root.html

为了节省大家的时间，我这里对官方的介绍简单摘要一些：

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，并且可在各种平台上运行，包括 Windows、Linux、OS X、Android 和 iOS。针对基于 CUDA 和 OpenCL 的高速 GPU 操作的接口也正处于积极开发之中。OpenCV.js 则将 OpenCV 引入开放网络平台，使其可供 JavaScript 程序员使用…
Emscripten 是一款 LLVM 至 JavaScript 的编译器。它接受 LLVM 位码作为输入，该位码可以通过 clang 工具从 C/C++ 代码生成，并进一步将这些位码编译为 asm.js 或 WebAssembly，这两种格式均能在现代网络浏览器内部直接执行…

Emscripten：神奇的编译器

根据上文我们可以得知，这里是需要用 Emscripten 把 OpenCV 编译为 OpenCV.js
如果你不希望自己手动完成整个编译过程，可以跳过这几个章节，直接到《直接获取编译产物》部分

ASM.js 与 WebAssembly

ASM.js
简单来说，ASM.js 是一位名叫 Alon Zakai 的博士发明的，初衷只是为了让自己喜欢的游戏能够在 Web 环境运行。
他为此发明了一种工具叫做 Enscripten，是一个 LLVM 工具链，能够把 C/C++ 代码编译为 JS，同时为了保证性能，这种 JS 被加上了一些特定的限制，也就成了 ASM.js。
WebAssembly
后来，Mozilla、Google 之类的浏览器厂商也注意到了 ASM.js，受其启发，最终做出了 WebAssembly。

详情请参考：https://ruanyifeng.com/blog/2017/09/asmjs_emscripten.html

下载 Emscripten 并配置环境

要使用 Emscripten 产生 wasm 的第一步则是：

To Install Emscripten, follow instructions of Emscripten SDK.

注意，在安装之前，需要注意系统兼容性，这里看看对Windows的要求：

Instead of running emscripten on Windows directly, you can use the Windows Subsystem for Linux（WSL） to run it in a Linux environment.

我们安装一个 WSL 再去做下一步。
WSL 安装成功界面

安装好之后的步骤就是：
1. 拉取源码仓库并进入

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

2. 更新源码（刚刚clone过的话就不用走这一步了）

git pull

3. 下载安装 SDK 并启用（非常容易失败，多试亿次就好）

./emsdk install latest
./emsdk activate latest

4. 设置环境变量，并检测是否设置成功（如果设置失败可以跳过这一步，采取下述的其他方案）

source ./emsdk_env.sh
echo ${EMSCRIPTEN} // 如果输出了非空的值，那么就成功了

windows下改为运行 bat 脚本，但是还是可能报错（报错请看下方的一些分析）

如果出现异常，那么请按照下方的提示自行排查🤔：

请仔细看命令结束后提示的信息，确保第1-3步真的运行成功了
请确保网络畅通
检查WSL是否安装 bzip2、cmake 等
请确保正确配置了环境变量；如果没有配置成功的话，后续也可以手动指定 emscripten 的路径，这将在下一章节中提及。

之后每次版本更新，都得git拉取最新的代码然后走上面的步骤进行编译。
这里似乎有点麻烦，或许可以封装一个脚本去简化上述流程。

下载 OpenCV 并编译

继续按照官方文档教的做就好：
1. 下载OpenCV源码

git clone https://github.com/opencv/opencv.git

2. 打包构建，并把产物放到 build_js 目录下（注意需要 python3.6+ 和 cmake）
这里默认是打包为 asm.js, 如果要打包为 wasm 则需要在末尾加上 --build_wasm 参数

cd opencv
python3 ./platforms/js/build_js.py build_js

如果之前没有配置emscripten的环境变量，则现在需要手动指定，即把上面第二条指令换成这个：

python3 ./platforms/js/build_js.py --emscripten_dir ../emsdk/upstream/emscripten build_js

如果上述过程没有发生报错，那么之后就进入到漫长的编译测试流程(我这里用了一个小时左右)…

引入并使用 OpenCV.js

还是比较简单，直接当一个UMD模块进入就好了

<script src="./opencv.js" type="text/javascript"></script>

直接获取编译产物

上述过程得到的产物，可以直接在我的 Github 获取：

https://github.com/CoderSerio/opencv.js

官方编译好的产物：

https://docs.opencv.org/4.8.0/opencv.js

其中4.8.0是手动指定的版本，可以根据需要进行修改，推荐下载到本地使用

使用 OpenCV.js

在浏览器中使用

代码实现

这里我们将编译产物opencv.js复制到我们的 web 项目中，然后编写一个像下面这样的 html 启动一个本地服务器：

<!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); // 读入图片，格式是一个矩阵
          const dst = new cv.Mat(); // 新的矩阵
          cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY, 0); // 写入新的矩阵并做灰度处理
          cv.imshow("canvasOutput", dst); // 将内容输出到一个 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>

运行效果

启动后的效果：
OpenCV.js 项目启动
使用效果如下：
OpenCV.js 项目运行效果预览

在 Node.js 中使用

在 WSL 中安装 Node

接下来的过程仍然会在 WSL 中进行，所以这里需要现在 WSL 中安装 NODE
考虑到网络不稳定，安装 nvm 的过程可以用下面这个命令来替代：

git clone https://gitee.com/mirrors/nvm.git ~/.nvm && cd ~/.nvm && git checkout git describe --abbrev=0 --tags

clone 完这个库之后，在里面能够找到一个 install.sh，执行即可
如果执行失败，也可以参考下文手动配置环境(如果之前你已经安装过了，那么可以试试直接执行第 3 步）：

1.打开环境配置文件（这里我用的 bash，所以在 bashrc 中

vim ~/.bashrc

2. 文件末尾写入内容

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 的环境配置

source .bashrc (如果已经配置过了，那么直接填之前的bashrc路径即可)
代码实现与在浏览器中基本一致，细节可以参阅上文中提到的官方文档。

代码实现和运行效果

代码实现与在浏览器中基本一致，细节可以参阅上文中提到的官方文档，此处不再赘述。