本文目标
- openCV.js是什么?
- openCV.js能做什么?
- openCV.js怎么用?
- openCV.js有哪些常见例子?
- openCV.js优缺点有哪些?
介绍
openCV(open computer vision)是一个跨平台的计算机视觉库,主要用于图像识别和处理领域。openCV封装300多个API,实现了图像处理和识别方面的很多通用算法。
对于Web开发者想学习openCV有几个问题:
- 图像识别和处理领域门槛很高,需要一定专业背景;
- 需要掌握特定的后端语言,比如C++;
- openCV开发环境配置繁琐;
- 代码调试成本高;
openCV.js是openCV的JS版本,主要运行在浏览器环境中。使用openCV.js可以实现多种复杂图像处理和识别,比如图像美化、人脸识别等功能。对Web开发者openCV.js有下面几个优势:
- 熟悉的编程语言和开发环境;
- 代码实时运行,调试成本低,开发效率高;
加载openCV.js
openCV官网没有提供openCV.js版本,需要开发者手动进行编译。网上有文章介绍如何编译,这里就不赘述。如果不想编译可以去github下载第三方编译好版本。
加载openCV.js代码如下:
因为openCV.js文件比较大,为了不影响页面整体展现,可以通过异步非阻塞方法加载,代码如下:
如果openCV.js加载后需要立即处理图片的话,可以增加一个onload
事件,代码如下:
使用openCV.js
加载openCV成功后,全局环境下会出现一个cv
对象。cv
对象包含openCV.js所有属性和方法。
我们试着使用cv
对象读取一张图片并生成到canvas
中, 这个过程涉及到两个API:
- cv.imRead: 读取图片;
- cv.imShow: 在指定位置生成图片;
整体代码如下:
|
|
|
|
openCV.js常见例子
- 图像美化
- 人脸识别
图像美化是一个最常见图像处理场景,特别是人脸的处理。下面例子是将一个脸上的雀斑进行去除,使用是openCV.js中双边过滤算法。代码如下:
|
|
运行截图
人脸识别是图像识别领域热门应用。当有脸部训练模型后,可以使用openCV.js实现人脸识别。主要代码如下
|
|
运行截图
openCV.js优缺点
openCV.js让Web开发者低门槛进入图像处理和识别领域,可以在浏览器上创造出更强大应用。不过在使用openCV.js之前一定要调研清楚自己项目是否适用。下面是我总结openCV.js优缺点;
优点:
- openCV.js功能强大,API丰富;
- openCV.js版本持续更新和维护;
缺点:
- openCV.js相关文档缺乏,学习成本高;
- openCV.js文件体积大,对页面加载速度影响大;
- openCV.js处理图像会消耗大量计算资源,有时会导致页面卡顿;
- openCV.js相关社区匮乏,遇到问题解决成本高;
总结:如果对图像处理和识别感兴趣,可以考虑下功夫钻研一下openCV.js。我觉得openCV.js一把屠龙刀。如果有本事用好它,会带来很多好处;如果用不好它,可能会伤到自己。