Opencv.js+Hbuilder快速打造一个图像处理App

一、开发工具简介

1、Opencv.js

Opencv 是一个常见的图像处理库，通常使用C++和python去调这个库对图像、视频流进行处理，而js版的opencv可以进一步丰富前端对于图像的处理。目前opencv.js版映入了与其他版本基本一致的方法函数，甚至加入了神经网络的加载调用方法，这使得Js也可以引入各类功能强大的AI算法，处理图像和视频流。
opencv.js官网：https://docs.opencv.org/4.x/d5/d10/tutorial_js_root.html

2、Hbuilder

而HbuilderX，官网介绍“H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。我们也简称HX。 HX是轻如编辑器、强如IDE的合体版本。”
我们可以通过HbuilderX，将制作好的opencv.js图像处理项目打包成app。
HbuilderX官网：HbuilderX官网

二、Demo(一个简单的Opencv.js处理图片项目)

1、下载编译好的opencv.js

opencv.js文件可从官网上直接下载，通常使用utils.js这个官方给的文件调用opencv中的一些方法。可跳过直接下载完整项目。
opencv.js下载地址

2、下载HbuilderX

直接在HbuilderX官网下载安装一条龙

3、项目下载到本地调试

项目下载地址：https://github.com/sk8boi/OpencvJSDemo.git
使用HbuilderX打开项目后，电脑连接手机，该装的插件装，运行到基座，选到当前受经济设备，就可以直接在上面调试了。

4、一个简单的打开图片Demo

三、总结

不少人吐槽Hbuilder的生态不好，但个人觉得它上手比较简单，可以快速的搭建一个简单的app或者小程序demo。其次最主要的是opencv.js，之前做深度学习和写图像算法的时候，习惯了使用opencv-python去处理图片数据集，偶然看到了opencv.js版本，刚好有个项目要部署到移动端，就尝试将该使用js版本的opencv去读取神经网络模型，同时完成预测，opencv.js原生的读取方法没有试过,后来是使用onnx.js完成模型读取，opencv.js获取视频流去实现的。
中间绕了许多弯路，这样的方法实现虽然绕过了原生的安卓开发，但也存在很多问题比如检测性能方面，值得注意的是当前JS并非主流的部署神经网络模型方法。
这个demo只是实现了简单的图像加载功能，后续尝试在其上面加载神经网络模型进行图片或者视频流推理。