OpenCv.js（图像处理）学习历程

opencv.js官网

4.5.0文档

以下内容整理于opencv.js官网。

简介

OpenCV由Gary Bradski于1999年在英特尔创建。第一次发行是在2000年。OpenCV支持c++、Python、Java等多种编程语言，支持Windows、Linux、Os X、Android、iOS等平台。基于CUDA和OpenCL的高速GPU操作接口也在积极开发中。OpenCV.js将OpenCV带到开放的web平台，并使JavaScript程序员可以使用它。

图片处理 

读取图片

readImage.html

读取图片
OpenCV.js is loading...

 

 
 
imageSrc 
 
 

 
 
canvasOutput
 

浏览器运行。 

灰度图

blackAWhite.html

IMAGE


Start















canvasInput 


canvasOutput

浏览器运行。 

 

 阈值

inRangeImage.html

OpenCV.js is loading...

 

 
 
imageSrc 
 
 

 
 
canvasOutput
 

 

其它 

imageTemplate.html

 修改框内的代码即可对图片进行不同的操作，此代码适用于大部分的官网中有关图片操作的代码。 

视频处理 

 均值漂移

Start

















videoInput


canvasOutput

背景差分 

backgroundSubtraction.html

Start

















videoInput


canvasOutput

卡纳德方法

LucasKanade.html

Start

















videoInput


canvasOutput

人脸识别

人脸识别_照片 

Start















canvasInput 


canvasOutput

 

 以上测试图片来自百度。

可以看到，有的地方不是耳朵也会被标记成耳朵，原因是官方的数据集数据比较微小，数据不够准确，但是眼睛的地方能标记出来就已经达到我们的学习目的了，以后可以用更精确的数据集替换效果就会好很多。

人脸识别_相机 

Start
	




    

    

        

            
        
        

            
        
        

        

    
    

        

            
videoInput
        
        

            
canvasOutput
        
        

        

    
    

4.8.0文档

4.8.0相对于4.5.0新增了深度学习模块。

深度神经网络

 

选择相应的model，从对应的链接中得到对应的数据集文件，看第一块代码的配置项是否一致。 

 上传对应的文件，点击运行。

起初认为是时间问题，晚上挂了一段时间，早上起来依旧没有任何数据 ，打开浏览器审查页面，发现有很多报错，无论如何我都得不到想要的结果，这块就放弃了。

补充

完整文件

gitee获取

去掉文本代码区域

在实际开发中我们是不需要textarea的，所以必须去掉它。但是我尝试更改了html文件和js文件，没有成功，所以干脆直接让textarea区域：display:none。

参考文献

代码哈士，opencv.js人脸识别简单

opencv.js官网的js文件不是真正的js文件，官网文档里需要建立其环境，这片文章介绍通过爬取得到官方的资源。 

opencv.js官网