自动调整亮度/对比度以读取图像中的文本

Question

我想知道是否有人可以向我指出正确的方向，以使用javascript自动调整从手机摄像头拍摄的图像的亮度/对比度，从而使从图像中读取文本更加容易。

感谢任何帮助，

非常感谢。

Answer 1

要自动调整图像，我们可以使用从图像生成的直方图，然后使用阈值找到黑点/白点，以将像素值缩放到相对两端的最大值。

在HTML5中，我们需要使用canvas元素才能读取像素信息。

建立直方图

直方图是图像中最能代表其值的概览。对于亮度对比，我们将对亮度值（像素的感知亮度）感兴趣。

^{亮度直方图示例}

要计算亮度值，我们可以使用REC.709（建议使用AKA BT.709，此处使用）或REC.601公式。

Y = 0.299 * R + 0.587 * G + 0.114 * B

我们需要将其转换为整数（iluma = Math.round(luma);），否则将很难建立基于整数值[0，255]进行存储的直方图（请参见下面的示例代码）。

确定使用哪个范围的策略可能会有所不同，但是为简单起见，我们可以基于两端像素的最小表示量选择阈值策略。

^{红线显示示例阈值}

为了根据阈值找到最暗的颜色，我们将从左到右扫描，当我们得到一个高于阈值的亮度值时，将其用作最小值。如果我们到达中心（或什至只有33％），我们可能会中止并默认为0。

对于最亮的，我们将执行相同的操作，但是从右到左，如果未找到阈值，则默认为255。

当然，您可以为每个端点使用不同的阈值-在找到适合自己情况的东西之前，都需要反复尝试这些阈值。

现在，我们应该有两个表示最小-最大范围的值：

^{基于阈值的最小-最大范围}

缩放一般亮度水平

首先根据最小-最大范围计算我们需要使用的比例因子：

scale = 255 / (max - min) * 2

我们将始终从每个分量中减去min，即使这意味着它将进行裁剪（如果<0，则将值设置为0）。当减去时，我们使用比例因子缩放每个分量值。最后的x2是为了补偿亮度和实际RGB值之间的变化。像其他值一样使用该值（这里只是一个任意示例）。

我们对每个像素中的每个分量（0夹和比例）执行此操作：

component = max(0, component - min) * scale

当图像数据放回原处时，对比度应基于给定的阈值最大。

提示

您不必使用整个图像位图来分析直方图。如果您处理大型图像源，则可以缩小为较小的图像-您不需要太多，因为我们关注的是最亮/最暗的区域，而不是单个像素。

你可以照亮以及使用与它自己，如混合模式添加的对比度的图像multiply，lighten，hard-light/ soft-light等（<= IE11不支持混合模式）。调整这些公式，然后进行实验。

例

这在显示上述技术的缓冲区上起作用。存在更复杂，更准确的方法，但这只是概念验证（根据CC-3.0-sa许可，需要提供署名）。

它以10％的阈值开始。使用滑块使用阈值查看结果差异。阈值可以通过除此处所示之外的其他方法来计算。实验！

使用整页运行代码段-

Y = 0.299 * R + 0.587 * G + 0.114 * B

scale = 255 / (max - min) * 2