用js第三方库jquery写一个均衡化直方图的程序

如果有一幅灰度图片，高灰度度过于集中，或者是低灰度过于集中那么它的细节就会被隐藏掉，不利于图像判读。
例如下图

它的灰度直方图如绿色条形统计图所示。可以看出低灰度值过于集中，导致图像太暗不利于分析。
这次，我们的项目就是用js和网页前端技术把一幅灰度图对它进行直方图均衡化，然后输出处理后的图形。

相关原理

首先，补充几个知识，第一灰度直方图。
x轴是每个灰度级数L，纵坐标y轴是每个灰度级像素数目。假设图像是256位的那么图像的级数L是[0,1,...,255]。
对每个灰度级的像素个数进行计数。形成直方图y坐标数据。并以此制作直方图。div .v是直方图的y坐标轴。
定义均衡化函数。均衡化的目的就是使图像的直方图变得平坦，每个灰度级的像素数目尽可能一样多。假设新图像直方图平坦，即每个灰度级的像素数目一样。那么，旧图像中当灰度值<=p时，它的像素总数目和新图像灰度值<=q时一样多。根据条件可以得出一个旧灰度值对应的新灰度值的映射函数。q=E(p);
可以看出对于一个(mn)的图像，我们可以先算出<=某个灰度值时的像素出现概率(即对单个概率相加p1+p2...+pp一直到这个灰度值的概率为止)，为累积分布函数。然后乘以像素总数，得到小于某个灰度值像素总数目A。然后对于新图像，由于每个灰度级概率相等，所以像素出现的概率为1/256.灰度值小于等于q时,像素总数目为总共的概率和q/256乘以像素总数目mn。
得到图像均衡化映射E为灰度级<=p时像素出现的概率总和乘以总灰度级数L。例子中是256。
编程代码如下pen画布画笔，用于绘制均衡化图像。n原图像灰度直方图矩阵，pixeln图像中像素总数。pixels原图像的getImageData返回对象。用于创建新图像，并放置修改后的图像数据。用putImageData来绘制修改后的图像。
返回值为新图像每个灰度级像素概率数组。

1.利用canvas把原始图像绘制到画布上。
具体代码如下:
由于getImageData()得到的图像数据包含图像像素数据data和height 与width三个数据所以取出data放入pixeldata。这个像素数据的数据格式为rgba四个分量，由于灰度图r，g，b分量相同。所以四个数据代表一个像素，取出任意一个分量存放入greydata作为图像像素矩阵数据。
然后基于这个数据制作灰度直方图。



均衡化效果如下图：