计算机视觉入门 之初识 opencv.js

本文作为计算机视觉入门系列第一篇分享，主要介绍当下比较热门的计算机图形处理库 OpenCV。本文将从 OpenCV.js 的编译方法、基础概念、常用 Api 使用样例以及辅助实现验证码识别的简单实战四个方面入手，帮助大家快速了解并上手 OpenCV.js。

随着近些年移动设备上面部识别，AI 美颜等功能的火热，作为目前最热门的计算机图形处理库 —— openCV 开始大放异彩。

OpenCV ，全称 Open Source Computer Vision ，是一个基于 BSD 许可（意味着它可以被用于商业应用）的开源跨平台计算机视觉库，由 C 函数和 C++ 类构成，并且提供了多个语言的接口 ^[1] 。OpenCV提供了大量图像处理的功能，从图像显示，到像素操作，到目标检测等，大大简化了图形处理以及深度学习应用的开发过程。OpenCV.js 是 JavaScript 开发者与 OpenCV 计算机图形处理库之间的桥梁，起先仅仅是部分 JavaScript 开发者自行开发的 OpenCV 应用接口，其原理是借助一款 LLVM-to-Javascript 的编译器 —— Emscripten 将库底层 C++ 代码编译为可在浏览器运行的 asm.js 或者 WebAssembly ，后来该项目日趋完善，并于 2017 年并入整个 OpenCV 项目。

小贴士

WebAssembly 是一种新的编码方式，可以在现代的网络浏览器中运行. 它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如 C/C++ 等语言提供一个编译目标，以便它们可以在 Web 上运行。它也被设计为可以与 JavaScript 共存，允许两者一起工作。

OpenCV.js 入门

为什么需要 OpenCV.js

Web 是最普遍存在的开放计算平台，凭借 HTML5 标准的普及，Web 应用程序能够使用 HTML5 视频标签播放在线视频，通过 WebRTC API 捕获网络摄像头视频，并通过 canvas API 访问视频帧的每个像素。随着可用的多媒体内容的丰富，Web 开发人员需要借助 JavaScript 实现各种图像和视觉处理算法，从而构建诸如 Web 虚拟现实（WebVR）和增强现实（WebAR）等创新的应用程序，这就要求在Web上有效地实现计算密集型视觉内核 ^[2] 。

此时，OpenCV.js 的出现使得 JavaScript 开发者可以高效便捷的使用 OpenCV 提供的图形处理算法，也就是说开发者仅凭借浏览器就能快速开发诸如图片风格美化、图像识别、OCR等功能的应用。

如何开始开发

OpenCV.js 编译

OpenCV 官方网站并没有提供提供 OpenCV.js 下载地址，需要用户在官网下载 OpenCV 库后，自行编译为 OpenCV.js。编译过程较繁琐，如果你对此不感兴趣，可通过以下链接直接下载本人编译好的版本 ^[3] 。

环境准备

1.由于编译过程中，编译脚本需要调用 Java 代码，编译机器需要安装 jdk，笔者建议下载 1.8 的版本，下载地址为 https://www.java.com/en/download/mac_download.jsp。

2.编译机器需要全局安装 CMake ，CMake 是 C/C++ 程序的依赖安装工具，对于 Mac OS 建议使用 Homebrew 进行安装。

// 使用 Honebrew 安装 cmake
brew install cmake
 

3.编译机器需要安装 LLVM-to-Javascript 的编译器 —— Emscripten，具体安装步骤如下：

// 从 git 仓库下载 Emscripten
git clone https://github.com/juj/emsdk.git
// 注意：这里下载的是SDK,就是Emscripten的 工具 包，不是编译器本身
cd emsdk
./emsdk update
./emsdk install latest
./emsdk activate latest
// 添加环境变量
source ./emsdk_env.sh
// 打印环境变量，确保已添加。
echo ${EMSCRIPTEN}
 

4.编译程序为 Python 脚本，需要本机安装 Python 环境，可以到官网 https://www.python.org/downloads/ 下载安装，注意需要安装2.7版本。

5.下载 OpenCV 源码，官方 git 仓库如下，建议下载 3.4.2 版本，最新版本 4.0.0pre 编译会报错。

// 从 git 仓库下载官方发布版本 openCV 库

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

编译 OpenCV.js

文件夹目录结构如下：

OpenCV
|----opencv #官方发布版本
|----platforms
|----js
| build_js.py #编译使用的 python 脚本
 
|----build_js #编译后版本
|----bin #存放编译后入口 js
| opencv_js.js
| opencv_js.wasm
| opencv.js
 

编译 OpenCV.js 需要执行 build_js.py 。

// 进入官方发布版本
 
cd opencv
 
// 执行编译脚本，执行之前请务必确保开发环境已经正确安装 python 和 cmake 。
 
python ./platforms/js/build_js.py ../build_js
 
// 编译脚本默认编译为 asm.js 版本，如果需要编译为 WebAssembly ，可以添加 '--build_wasm' 配置。
 
python ./platforms/js/build_js.py build_wasm --build_wasm
 

开发环境

创建index.html，利用 标签引入上文编译好的 OpenCV.js 文件。

<script async src="opencv.js" type="text/javascript"></script>
// 由于 opencv.js 文件体积较大，需要异步执行加载，避免阻塞 DOM 渲染。
 

接下来介绍 OpenCV.js 一些基本概念与操作。

基本概念与操作

1.矩阵

OpenCV.js 引入了新的变量类型 —— Mat类型，即矩阵类型，使用 let mat = new cv.Mat();
来创建新的矩阵类型，OpenCV.js 读取的图像均使用该类型存储。

2.图像的读取与写入

OpenCV.js 可以将 <img /> 或者 的内容读取为矩阵类型用以变换，同时也可以将处理好的图像作为<img /> 或者 的内容，具体方法如下：

// 读取
let mat = cv.imread("inputCanvasId");
// 其中 inputCanvasId 为目标 DOM 元素的 id 属性
 
// 写入
cv.imshow(mat, "outputCanvasId");
// mat 为处理后图像矩阵变量
 

实战应用

简单验证码识别

如图验证码，主要由数字与英文字母组成的四个主元素以及彩色杂边组成，使用 OpenCV.js 进行图像预处理的目标主要是将彩色杂边去除，本案例使用的 OCR 识别模型主要由 tesseract.js 文字识别库提供。

预处理步骤

1.将图像进行二值化得到黑白图像，从而降低数据处理难度。

// 将图像进行灰度化
cv.cvtColor(im, dst, cv.COLOR_BGR2GRAY)
// im 为原图矩阵变量，dst 为新生成图形矩阵变量
 
// 将图像根据指定阈值进行二值化处理
cv.threshold(dst, dst2, 230, 255, cv.THRESH_BINARY);
 

得到如下图像：

2.将二值化图像矩阵逐个像素自左向右扫描，去除四周包含三个或者以上白色像素的点。

for (let i = 100; i < pixel - 100; i++) { if ((i + 1) % 100 === 0) { dst2.data[i] = 255 dst2.data[i + 1] = 255 } else if ((i >= 0 && i <= 99) || (i >= pixel - 100 && i <= pixel - 1)) { dst2.data[i] = 255 } else { let counter = 0; if (dst2.data[i] == 0) { if (dst2.data[i - 100] == 255) { //上点 counter += 1; } if (dst2.data[i + 100] == 255) { //下点 counter += 1; } if (dst2.data[i - 1] == 255) { //左点 counter += 1; } if (dst2.data[i + 1] == 255) { //右点 counter += 1; } if (counter > 2) {
dst2.data[i] = 255 // 将四周包含白色像素大于三个的点转变成白色。
}
}
}
}
 
 

得到最终图像如下：

预测

使用 tesseract.js 提供的预测方法进行预测。

Tesseract.recognize( canvas , {
lang: 'eng',
})
.then(function (result) {
$('#result').html("结果:"+result.text)
})
}
 

使用 OpenCV.js 处理后的验证码进行识别，识别误差率由原来的 80% 降低至 15% 左右，预测功能基本可用。另外，OpenCV.js 还可以基于彩色信息进行字符提取，识别误差率会进一步降低至2%左右。

总结

本文简单介绍了计算机图形处理库 OpenCV 的 JavaScript 版本 OpenCV.js，及其初步的实践应用，OpenCV 的功能绝不仅于此，期待大家更进一步的探索！

扩展阅读

[1] https://brainhub.eu/blog/opencv-react-native-image-processing/

[2] https://docs.opencv.org/master/d5/d10/tutorial_js_root.html

[3] 下载地址: https://pan.baidu.com/s/1ZMkhcPw31hmW9qOeeOr7fQ 密码:r5wh

更多文章请关注 全栈探索 微信公众号，扫描下面二维码关注：