使用 Emscripten 将 C++ OpenCV 代码编译为 Javascript答案

【问题标题】：Compiling C++ OpenCV code to Javascript with Emscripten使用 Emscripten 将 C++ OpenCV 代码编译为 Javascript
【发布时间】：2019-10-12 14:46:33
【问题描述】：

我有包含来自 OpenCV 的头文件的 C++。我正在尝试使用 Emscripten 将其转换为 WebAssembly。当我尝试编译时：

em++ main.cpp -s WASM=1 -o seamCarve.html

我收到以下错误消息：

#include <opencv2/imgproc/imgproc.hpp>
         ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1 error generated.
shared:ERROR: compiler frontend failed to generate LLVM bitcode, halting

这是我第一次使用 WebAssembler，所以我不确定该怎么做。我已经编译了 OpenCV 库以创建一个 opencv.js，如以下链接中的步骤所述：

https://docs.opencv.org/3.4/d4/da1/tutorial_js_setup.html

我不确定是否需要在我的编译中包含这个 js 文件，或者我是否需要在编译时包含每个头文件。

【问题讨论】：

所以你的意思是你也有 opencv.js 和它的 .wasm 文件？
@BumsikKim 我编译了 opencv.js 文件，但并不确定是否需要它。如果我错了，请纠正我，但它似乎用于在 javascript 中调用 OpenCV 函数，而不是用于将包含 OpenCV 函数的 C++ 代码编译为 javascript。我没有任何 .wasm 文件。

标签： javascript c++ opencv webassembly

【解决方案1】：

一般而言，在将库与 C/C++ 代码一起使用时，您必须在生成可执行二进制文件时链接它。

因此，当使用 emscripten 时，您首先必须编译库，然后您可以使用例如链接时的静态库文件mylib.a，以便您的emcc 命令看起来像这样：

em++ -s WASM=1 main.cpp libopencv.a -o seamCarve.html

【讨论】：

谢谢！能否请您描述一下如何编译opencv之类的库，如何访问libopencv.a？

【解决方案2】：

OpenCV.js 旨在包含在您的 HTML 文档中，类似于任何 JavaScript 代码。然后，您可以从 JavaScript 代码访问几乎所有 OpenCV 函数。

现在您可以为 WebAssembly 构建您的 OpenCV。好的部分是，您不需要更改 JavaScript 代码，因为 WASM 模块包含在 OpenCV.js 文件中，但您需要为 WASM(WebAssembly) 进行编译

看看这个链接 https://docs.opencv.org/master/d4/da1/tutorial_js_setup.html

【讨论】：

感谢您的解释。获得 opencv 的 wasm 格式后，如何将自己的 c++ 代码（包含 opencv）编译为 wasm 文件。请您指导我必须使用的命令吗？
获得 OpenCV wasm 版本后我这样做的方式是从 JavaScript 访问它。你需要用 C++ 版本做的所有事情都可以在 JavaScript 中使用（不是真的所有东西，但大部分都是）。请注意，即使您使用 JavaScript，wasm 也是在进行图像处理。
我试过了，但是 c++ wasm 版本的代码比 javascript wasm 快大约 2 倍。这就是使用 cpp 而不是 js 的主要原因