FivekoGFX--webgl实现简单的图像处理及源码分析源码的一些说明如果github下载太慢，可以翻到本文最后，使用国内网盘下载。介绍：这是一个运行在浏览器上的简单图像和视频处理器，使用webgl和自定义着色器。所有源代码加起来约70kb，适合进阶学习者。话不多说，我们直接上文件结构。index.html、preview.js、fivekogfx.js是一些初始化操作。color.js是色彩空间的操作。shaderSourceRGB2GREY用于将RGB图像转换为灰度图像。灰度处理的处理方法有很多种：分量法最大值法、平均法、加权平均法。此处，使用了R、G和B分量的加权平均算法。:0.2989R+0.5870G+0.1140Bmatlab使用相同的算法。shaderSourceRGB2YCbCr用于将RGB颜色空间转换为YCbCr颜色空间。YCbCr颜色空间用于数字视频系统。公式如下：shaderSourceYCbCr2RGB当然是将YCbCr色彩空间转换为RGB色彩空间。使用的公式如下：shaderSourceSkinMask用于检测人体皮肤。在正常光照条件下，人体皮肤在YCbCr颜色空间中符合以下公式80≤Cb≤120和133≤Cr≤173。该算法来自这篇文章。shaderSourceRGB2XYZ用于将RGB转换为sRGB。对于PC、Mac或iOS&Android，sRGB最适合描述屏幕的色域。AdobeRGB和P3使用的算法如下：逆是：shaderSourceRGB2HSL使用的算法如下：shaderSourceRGB2BIN用于对图像颜色进行二值化，greaterThan(x,y)如果x>y则返回1，否则返回0。.js用于处理卷积。有关卷积的概念，请参阅这篇文章。与二维卷积不同，一维卷积多了一个方向变量来表示卷积是行卷积还是列卷积。Gauss.js用于处理高斯模糊相关性。有关高斯模糊的概念，请参阅这篇文章。除了本文提到的连续高斯卷积外，fivekogfx官网还提到了一种离散高斯卷积，可用于简单近似模拟：3x3卷积核5x5卷积核Harris.js角点检测可以参考这篇文章。在harris.js中，shaderSource被调用了两次。首先计算水平和垂直梯度，然后将导数存储在dx和dy中。floatdx=...floatdy=...gl_FragColor=vec4(dx*dx,dy*dy,dx*dy,1.0);然后计算每个像素的哈里斯分数，这里将使用3x3像素网格的平均值。#defineDET(_p)((_p).x*(_p).y-(_p).z*(_p).z)#defineTRACE(_p)((_p).x+(_p).y)vec4p=(GET_PIXEL(0,0)+GET_PIXEL(-1,-1)+GET_PIXEL(-1,0)+GET_PIXEL(-1,1)+GET_PIXEL(0,1)+GET_PIXEL(1,1)+GET_PIXEL(1,0)+GET_PIXEL(1,-1)+GET_PIXEL(0,-1))/9.0;浮动k=0.04；floatR=DET(p)-(k*(TRACE(p)*TRACE(p)));最后使用NMS（非极大值抑制）。gl_FragColor=vec4(vec3(max(R,0.0)),1.0);hough.js霍夫圆检测，用于检测图像上的圆。圆可以用极坐标表示，其中(a,b)为圆心，R为半径，(x,y)为圆上任意一点：a=x-Rcosθb=y-RsinθHoughCircel算法步骤如下：利用边缘检测算法，得到边缘上的那些点对于每一个“边缘”点（x，y），按照半径R遍历以自己为中心的圆，“加一个点”到这个圆圈上的每个像素。最后遍历整张图片，得分最高的像素为圆心。如果不知道半径R，需要预先计算出半径可能的范围，然后遍历。更多可以参考这篇文章。lbp.jslocalbinarypattern，Localbinarypattern(LBP)，是机器视觉领域一个非常重要的特性。参考这篇文章。logPolar.js处理极坐标。mean.js均值滤波器，简单来说就是取周围像素的平均值作为中心像素的值。这里使用下面的形式：请参考这篇文章。morph.js形态学运算符。这里主要实现了Erosion，可以消除一些小物体。和膨胀，连接两个原本相邻但不相连的物体。请参考《数字图像处理》第9章。npm.js中的非极大值抑制，即Non-Maximumsuppression，在检测一些物体的时候，可能会得到一些重叠的检测框，如下左图，我们需要一个算法，保留最好的，去掉其他的重复。你可以参考这篇文章。sobel.jssobel算子是边缘检测算法中使用的算子，一种离散微分算子（discretedifferentiationoperator）。用于计算图像灰度函数的近似梯度。由两个具有相同参数的独立3x3卷积组成。请参考这篇文章。symmetricnn.jssymmetricnn.jssymmetricneighborhoodmeanfilter，和均值滤波器一样，也是使用滑动窗口，不同的是前者会把中心像素周围的像素对称的分成几组像素，每组两个。如上图所示，颜色相同的像素为一组，白色的为中心像素。在每组像素中，选择靠近中心像素的像素加入到结果中，丢弃另一个，而不是像均值滤波器那样全部加入到结果中。请参考这篇文章和这篇文章。watershed.js分水岭算法是一种图像区域分割方法。在分割过程中，它以与相邻像素点的相似性作为重要参考，使空间位置相似、灰度值相似的像素点相互连接起来，形成闭合轮廓。可以参考这篇文章和《数字图像处理》的第10章。最后，如果github下载太慢，可以关注公众号，回复“五”获取源码国内网盘下载地址，随时关注最新动态！
