摘要：相关原理首先，补充几个知识，第一灰度直方图。是直方图的坐标轴。然后对于新图像，由于每个灰度级概率相等，所以像素出现的概率为灰度值小于等于时像素总数目为总共的概率和乘以像素总数目。然后基于这个数据制作灰度直方图。均衡化效果如下图
如果有一幅灰度图片，高灰度度过于集中，或者是低灰度过于集中那么它的细节就会被隐藏掉，不利于图像判读。
例如下图
它的灰度直方图如绿色条形统计图所示。可以看出低灰度值过于集中，导致图像太暗不利于分析。
这次，我们的项目就是用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作为图像像素矩阵数据。
然后基于这个数据制作灰度直方图。
均衡化效果如下图：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/83185.html
摘要：首先介绍跟图像处理显示有关两个库和，然后介绍增强图像对比度的实现原理。直方图均衡化就是为了达到这个目的，均衡化后的图像，像素落在每个灰度级上的个数是相等的。 首先介绍跟图像处理、显示有关两个库：NumPy和Matplotlib，然后介绍增强图像对比度的实现原理。 NumPy NumPy是Python用于科学计算的基础库，提供了一些很有用的概念，如：N维数组对象，可用于表示向量、矩阵、图...
摘要：其中负载均衡那一节，基本上是参考的权威指南负载均衡的内容。开发指南读了一半，就是看这本书理解了的事件循环。哈哈创京东一本骗钱的书。 欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队 发表于云+社区专栏作者：link 2014年一月以来，自己接触web前端开发已经两年多了，记录一下自己前端学习路上看过的，以及道听途说的一些书，基本上按照由浅入深来介绍...
摘要：其中负载均衡那一节，基本上是参考的权威指南负载均衡的内容。开发指南读了一半，就是看这本书理解了的事件循环。哈哈创京东一本骗钱的书。 欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队 发表于云+社区专栏作者：link 2014年一月以来，自己接触web前端开发已经两年多了，记录一下自己前端学习路上看过的，以及道听途说的一些书，基本上按照由浅入深来介绍...
阅读 1797·2021-11-22 09:34
阅读 1117·2021-10-09 09:44
阅读 2952·2021-09-29 09:35
阅读 3596·2021-09-14 18:01
阅读 1444·2021-08-16 10:49
阅读 1074·2019-08-29 14:11
阅读 813·2019-08-29 12:47
阅读 3054·2019-08-26 13:47
