基于节点编辑的openCV

引子：

opencv学习梯度不算很平坦，其中一个很重要的原因就是cv复杂度，cv中函数其特定的使用场景，对不同函数使用的参数不同，结果会差距很大。cv虽然提供了快速gui接口，也可以用cvui直接渲染控件到界面上，简单的任务基本应付。但对一些复杂算法，除了需要大量的方法、参数微调之外，还需要有记录和分析对比等一系列数据报告。前一段时间在学习Blender的节点系统，参数调节所见即所得非常直观，工作效率大为提升。试用一段时间后感觉可以在opencv中搞点动作，用最直观的方法来开发opencv功能。

选型

但在节点系统选型上，纠结了很久，imgui-node-editor是第一选择，因为它依赖少，跨平台性很好，渲染上显示上没有太大的缺陷，但是没有节点计算逻辑涉及，就是说自己去实现节点计算逻辑，缺乏较好的应用案例，这也是我最终放弃imgui-node-editor的一个主要原因。

Litegraph.js 是基于javascript的，互交以canvas为基础的，原生节点拿来可就用。以此为基础，可以实现大部分界面互交。虽然关于litegraph.js开发的资料比较少，但是litegraph.js本体就是一个很好的学习案例，可以参考如shader节点、MIDI处理等模块，webglstudio.js-master也非常值得参考。另外litegraph.js也是支持节点计算和节点拓展功能。自定义节点写起来比较清晰，我后面会花一点时间来介绍。

js和python接口：EEL是一个可选项，在python程序中标注下接口，即可以通过js来访问该接口以此来执行python函数，同样道理，也可以在Web中标注函数接口，让python来调用该接口进行页面更新。EEL可以作为一个服务器后台程序运行也可以一个Chrome独立程序直接运行。

图像接口：基础对象如数值、字符串等都可以方便的传输，图像稍微麻烦点，传输需要用到base64格式作为中间格式往来于各个节点之间，python接口在收到base64格式的参数后，转换成为np的array格式后即可进行后续处理，计算结束后再以base64格式返回js。

举个简单例子：

常规方法

比如需要对图像做一个消除孤立点的工作，所需的python代码如下，代码需要对图像做几步操作，打开原始图像，一次dilate，一次Canny，一次connectedComponentsWithStats，最后根据阈值进行孤立点涂色或标注等等，最后输出图像，代码如下

import cv2
import numpy as np
filename="image/test.jpg"
img = cv2.imread(filename,0)
kernel = np.ones((3,3),np.uint8)
dilate = cv2.dilate(img,kernel,iterations = 1)
canny1=cv2.Canny(dilate,100,200)
_, labels, stats, centroids = cv2.connectedComponents