本文作为计算机视觉入门系列第一篇分享,主要介绍当下比较热门的计算机图形处理库 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 进行安装。

3.编译机器需要安装 LLVM-to-Javascript 的编译器 —— 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.js 需要执行 build_js.py 。

开发环境

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

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

基本概念与操作

1.矩阵

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

2.图像的读取与写入

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

实战应用

简单验证码识别

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

预处理步骤

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

得到如下图像:

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

得到最终图像如下:

预测

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

使用 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

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

喜欢(0) 评论(1) 分享
  1. 赞,
    opencv.js 这个文件,我是通过从demo中拷贝这个文件代码,跳过编译的。

Leave a Reply

© 2019 JDC. All Rights Reserved.