墨奇科技博客 | 计算机视觉在前端应用中的实践Ⅰ

墨奇科技在业务中有很多应用需要在网页中对于图像进行处理、特征识别，让我们对于计算机视觉在前端应用中的实践有了一些自己的认识和了解，希望能够借此机会与大家进行分享，尤其是如何搭建基于 WebAssembly 的技术方案。

一、站在巨人的肩膀上

如何使用 OpenCV.js 进行图像处理

OpenCV 作为计算机视觉领域最为成熟的开源库，在实际业务中经常被运用于进行图像和视频处理。OpenCV 使用 C/C++ 进行编写，并且提供了 Python、Java、C#、Go、Javascript 等接口。在前端领域，当遇到需要在浏览器端进行图像处理时，使用 OpenCV.js 可以在多数业务场景中满足产品需求，提高开发速度，调高运行效率。

1.OpenCV.js 是什么？

OpenCV.js 是将 C++ 版的 OpenCV 通过 Emscripten 编译为 WebAssembly 版本的 OpenCV.js 库。常年来 Web 都只能运行 Javascript，而 Javascript 的语言特性从而决定了它在执行一些类似于图像处理等计算密集型操作时性能较差，即使在 V8 引擎的加持下仍然会有性能瓶颈。WebAssembly 赋予了 Web 端运行 C++、Rust 等语言编写的代码的能力，实现多数情况下更高效的计算性能，达到接近于 Native 的计算水平。

图片来源互联网

2.如何引入 OpenCV.js 到运行环境

如果希望在前端 Javascript 代码中使用 OpenCV.js 需要经过以下几个步骤：

• 第一步：获得 OpenCV.js 文件。参考官方教程，我们可以直接获得一个预编译的版本，或者当我们需要进行一些编译的配置时，也可以自己进行编译。如果自行编译的推荐可以使用 docker 的方式，方便快捷稳定。

• 第二步：在代码中引入 OpenCV.js 文件。当我们获得了文件后，可以通过 script 标签进行引入。一个 OpenCV.js 标准库的大小在 10MB 左右，所以建议使用 async 属性让文件异步载入。

• 第三步：确保 OpenCV.js 已经载入到内存中。使用 async 进行异步载入时，可以在标签的 onLoad 回调函数中执行后续操作，此时 OpenCV.js 文件已经下载完毕。虽然此时文件已经下载完毕，但是相关的函数和变量可能还没有完全加载到内存中，所以建议书写一个 cvFuncLoaded 函数用于判断运行环境中 OpenCV 相关的函数是否都已载入到内存中。

3.引入额外的 OpenCV 库

OpenCV 提供的预编译的版本只有标准库的内容，当我们希望使用 opencv_contrib 中的扩展模块内容时，就需要我们将我们所需要的扩展模块内容添